how to align all my li on one line?
Solution 1:
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)
Solution 2:
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>
Solution 3:
Using Display: table
HTML:
<ul class="my-row">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
CSS:
ul.my-row {
display: table;
width: 100%;
text-align: center;
}
ul.my-row > li {
display: table-cell;
}
SCSS:
ul {
&.my-row {
display: table;
width: 100%;
text-align: center;
> li {
display: table-cell;
}
}
}
Works great for me
Solution 4:
Here is what you want. In this case you do not want the list items to be treated as blocks that can wrap.
li{display:inline}
ul{overflow:hidden}