Menu
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>
</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
947
The width property, by default, sets the width for the content area, although if the value of the box-sizing is set to border-box then it will set the width of the border area. Syntax: width: auto | value | initial | inherit; Note: The width property for the element does not involve the padding, border & margin.
The height and width of an inline element cannot be set in CSS. You cannot set the height and width of block-level elements in CSS. Inline elements flow left to right, meaning inline elements appear on the same line unless the line wraps or there's an explicit line break ( <br/> )
Try to replace your display:inline by display:inline-block
193
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.
35
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
