What is the best way to implement overflow hidden in an unordered list?

My goal is to achieve the following:

-

-

I am struggling with keeping my unordered list on a single line with overflow:hidden. I want the ul to flow naturally without restructuring the HTML or using absolute positioning for the arrows. Can you help me with this issue and suggest the preferred method?

This is what I have done so far: http://jsfiddle.net/pTaTc/

HTML

<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
<li><a href="#">Category 6</a></li>
<li><a href="#">Category 7</a></li>
<li><a href="#">Category 8</a></li>
<li class="arrow-wrapper">
    <a href="#" class="left-arrow"><</a>
    <a href="#" class="right-arrow">></a>
</li>
</ul>

CSS

* { font-family: arial; font-size: 1em; }

ul { position: relative; background: black; padding: 1em; }
li { display: inline; }
a { color: white; text-decoration: none; padding: 1em 2em; display: inline-block; }
.arrow-wrapper { background: black; }
.arrow-wrapper a { color: #54bdff; font-size: 2em; font-weight: bold; line-height:.75; }
.left-arrow { position: absolute; top: 0; bottom: 0; left: 0; }
.right-arrow { position: absolute; top: 0; right: 0; bottom: 0; }

/* CSS gradients for arrows */
.left-arrow {
background: -moz-linear-gradient(left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(50%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
background: linear-gradient(to right, rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000',GradientType=1); 
}

.right-arrow {
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%);
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%);
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000',GradientType=1);    
}

Your assistance is greatly appreciated as always!

Answer №1

To prevent wrapping, apply the CSS property white-space: nowrap; to your ul element.

To learn more about the white-space property, visit this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can I take to prevent my JavaScript code from interfering with my pre-established CSS styles?

I'm currently designing a mini-email platform that serves as a prototype rather than a fully functional application. The HTML file contains placeholder emails that have been styled to appear presentable. I've implemented an input bar and used Jav ...

Integrate stylish checkbox design into a form in Rails

I discovered some beautiful css styles for checkboxes that I would like to use instead of the regular ones. You can find these styles here: . Could someone guide me on how to implement this change? This is the code snippet from the form: <div class=" ...

Overcoming Challenges with Ajax Success in Bootstrap DataTable Modal

Recently, I created a webpage featuring a top fixed navbar and a CRUD datatable with pagination supported by buttons that trigger modals. However, I'm encountering an issue where upon clicking the delete button in the modal to remove a record, the mod ...

Misconception about the usage of jQuery's .each() function clarified with an illustrative example

Problem Description (See Fiddle): When clicking on the red boxes, they transform into kittens and display an alert with the current value of i. Clicking on a large fading kitten will reset everything. I am puzzled as to why alert(i) is triggering multipl ...

Tips for successfully passing PHP variables to a JavaScript function

Having trouble passing the selected values of two comboboxes to another PHP file using AJAX. How can I pass both values in one function? <script> function showUser(str,str2) { if (str == "" || str2 =="") { document.getElementById("tx ...

Is there a way to restrict keyboard input on this date picker?

Can you review the following link and let me know which properties or events I should utilize in this scenario? https://codesandbox.io/s/charming-frost-qrvwe?file=/src/App.js ...

take a paragraph element outside of a container div

In my ASP project, I have incorporated JavaScript and CSS code that I obtained from JonDesign's SmoothGallery demo website. Now, I am trying to move the p tag containing the summary out of the div. Here is the current code snippet: <div id="myGall ...

Navigate the div with arrow keys

Looking for an answer similar to this SO post on moving a div with arrow keys, could a simple and clear 'no' be sufficient: Is it possible to turn an overflowing div into a "default scroll target" that responds to arrow-up/down/page-down/space k ...

Is it possible to move the Material UI TableSortLabel Arrow to the opposite side?

My table has columns that are both right aligned and left aligned, and I need them sorted. When the column is right aligned, I would like the sorting icon to be on the left side of the header. Otherwise, there is an awkward empty space where the icon shoul ...

Using a function on a singular element

I'm currently working on my portfolio and I would like to organize my projects in a menu similar to this felipestoker.com When you click on Works, it displays a menu with my projects categorized. However, when I click on a category, all of them appea ...

Is there a problem with the way divs are being displayed when using jQuery to show the first 12 elements with the class "hide-show"?

I am encountering a problem with displaying data using the jQuery slice() and show() methods to reveal dynamically generated divs from a PHP function. The code is as follows: <style> .hide-show { display :none; } </style> <div class="c ...

The use of scaffolding and grid structures within the Twitter Bootstrap framework

I'm currently utilizing the bootstrap scaffolding/grid system in the following manner: <div class="row-fluid"> <div id="insta-shop-filter" class="span2 visible-desktop"> </div> <div id="insta-shop-grid" class="span1 ...

Ensuring that hover remains active despite mousedown in JavaScript, CSS, and HTML

It appears that in browser-javascript hover events are deactivated when the mouse button is pressed down, as demonstrated by the following example: (Please run the code snippet to witness what I am referring to.) * { user-select: none; } #click, #drag, ...

The 16x9 Bootstrap ratio is causing a significant spacing issue when utilizing the Azure Media Player

I am trying to create a layout with 2 columns - a video on the left (with aspect ratio 16x9) and a sidebar on the right (with min-width). As the window width changes, I want the video to resize proportionally while the sidebar maintains its width. However ...

Avoiding overlapping in setTimeOut when using jQuery.hover()

Looking to trigger an effect one second after the page loads, and then every 3 seconds in a loop. When the user hovers over a specific element with the ID #hover, the effect should pause momentarily. It should then resume 2 seconds after the user stops hov ...

Enhancing the synchronization of data between the model and the view in

Can AngularJS support "double data-binding" functionality? I am trying to extract mat.Discipline[0].nom_FR from an array containing nom_FR, nom_DE, nom_EN, and nom_IT. The value of mat.Langue[0].langue is either "FR", "DE", "EN", or "IT" based on the sel ...

Overlap of Navigation Bar and Carousel

Encountering an issue. I recently made a modification to my website in hopes of integrating a full-width carousel instead of a jumbotron. However, there seems to be a problem as my navbar is overlapping the jumbotron section along with the caption and oth ...

Step-by-step guide on visually comparing two iframes for differences

Scenario : In my project, I am dealing with 2 iframes that contain a significant number of divs and other controls, making both iframes similar in size to complete HTML websites. My goal is to compare these two iframes and identify any differences. Consi ...

bxSlider adds in an empty slide after deleting an image

Whenever I click a link in my navigation, I want to remove certain images from the page. I tried implementing a solution, but now I have two empty spaces where the images used to be. How can I remove those as well? I searched on Stack Overflow for a soluti ...

Encountering a NaN outcome when summing values from various select options

I'm working on a project that involves adding up the prices based on the surface chosen by the user. I'm struggling with calculating the partial cost when the user's choice changes. totalSum.ts num: Calculation totalAmount: number cate ...