Menu
my CSS
ul{
overflow:hidden;
}
li{
display:inline-block;
}
my HTML
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
i want to align all my li items in one line, if i did that everything works fine except that when 3 or 4 li's fills the first line on my body they go the the second line, i want them to be on 1 line and everything after the 1 line is filled will be "hidden"
FOR EXAMPLE ::
// NOTE li holds sentences not just 1 letter
OUTPUT NOW ::
a b c d
e f g
DESIRED OUTPUT ::
a b c d e f //all of them in 1 line and the rest of them are hidden 'overflow:hidden'
511
The quickest way to display a list on a single line is to give the <li> elements a display property value of inline or inline-block . Doing so places all the <li> elements within a single line, with a single space between each list item.
To get all elements to appear on one line the easiest way is to: Set white-space property to nowrap on a parent element; Have display: inline-block set on all child elements.
Today, I am going to explain some CSS trick to display all the lists into the one line, i.e., when you want to show menu in your HTML, then you will write the following HTML code. <ul> <li>Home</li> <li>Blog</li> <li>Faq</li> <li>About Us</li> <li>Contact Us</li> </ul?
To align div horizontally, one solution is to use css float property. But a better solution is to to use CSS display:inline-block on all divs which needs to be aligned horizontally and place them in some container div.
Try putting white-space:nowrap; in your <ul> style
edit: and use 'inline' rather than 'inline-block' as other have pointed out (and I forgot)
94
This works as you wish:
<html>
<head>
<style type="text/css">
ul
{
overflow-x:hidden;
white-space:nowrap;
height: 1em;
width: 100%;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
</ul>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
