Menu
I have the following li item:
<li> <span style='float:left; background-color:red'>a</span> <span style='float:left; background-color:green'>b</span> </li> I'd like the span on the right to fill whatever width is remaining in its parent li. Is there a way to do that?
Thanks
568
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
The <span> tag is a inline element, it fits into the flow of the content and can be distributed over multiple lines. We can not specify a height or width or surround it with a margin. It can be placed inside a paragraph to define a part of it without affecting the appearance of the text.
Using width, max-width and margin: auto; As mentioned in the previous chapter; a block-level element always takes up the full width available (stretches out to the left and right as far as it can). Setting the width of a block-level element will prevent it from stretching out to the edges of its container.
You don't want to float each of them left, only the first one, and then make the second one display in block mode:
<li> <span style='float:left; background-color:red'>a</span> <span style="display: block; background-color:green;">b</span> </li> 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
