can we assign width to li
i have following html page with UL and LI, i try to assign width to each LI but can't see cay success
<html>
<head>
<style type="text/css">
ul
{
overflow-x:hidden;
white-space:nowrap;
height: 1em;
width: 100%;
}
li
{
display:inline;
padding-right:10px;
}
</style>
&l开发者_开发问答t;/head>
<body>
<ul>
<li style="width:100px">abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
<li>abcdefghijklmonpqrstuvwxyz</li>
</ul>
</body>
</html>
because each of my LI has different width.
Thanks
Try to replace your display:inline by display:inline-block
No, you can't assign width to anything that is displayed inline, which you've set your LI to be. Instead, you most often want to use display: block; float: left; which'll allow for setting width.
Try this CSS
ul {
white-space: nowrap;
height: 1em;
width: 100%;
}
li {
list-style-type: none;
width: 100px;
overflow-x: auto; /* change to hidden if that's what you want */
float: left;
margin-right: 10px;
}
You are giving the lis display: inline and widthdoesn't apply to inline elements. You'll need to use an alternative to position the elements beside each other such as floating them.
To provide more on the previous two answers, you can't specify the width inline, but you can check out an example on how to do it here
You'd have to work on your code because you can't assign widths to inline elements. But this can be solved by setting the display to block and by floating it.
加载中,请稍侯......
精彩评论