I want my two span
to expand to fit into my li
element.
In the original project I use bootstrap and jquery too, but as example this will be enough:
http://jsfiddle.net/d5pc8Lp3/
<ol>
<li><span>Element-Name</span><span>></span></li>
<li><span>I-want-to-fit-like-the-li-width</span><span>></span></li>
</ol>
The first span
in the li
element is the element name, and the second span
is the "navigator".
I want that the first span
width fill the rest of the li
element.
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
To do so, use the “span” to access it. After that, set the value of the display property as “block” and its width and height as “400px” and “150px”. Moreover, set the background color of the span as “rgb(11, 235, 243)” and the border of the span as “5px” width, “solid” shape, and “rgb(47, 0, 255)” color.
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.
The span tag is an inline element that you use to make a smaller part of content stand out with CSS or JavaScript. You shouldn't nest span unless you thoroughly know what you're doing – but you can put multiple span tags within a block-level element.
You can use flexbox:
li {
display: flex; /* Magic begins */
}
li > :first-child {
flex-grow: 1; /* Grow to fill available space */
}
ol > li {
list-style-type: none;
padding: 0px;
margin: 0px;
border: 0px;
margin-top: 15px;
display: flex;
}
li > span:nth-child(1) {
margin-right: 3px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
flex-grow: 1;
}
li > span {
padding: 5px;
color: #c7c7c7;
border: 1px #ccc solid;
background: #fff;
}
li > span:nth-child(1) {
margin-right: 3px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
li > span:nth-child(2) {
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
li > span:nth-child(1):hover {
border: 1px #1c1c1c solid;
cursor: pointer;
}
li > span:nth-child(2):hover {
border: 1px #1c1c1c solid;
cursor: pointer;
}
<ol>
<li><span>Element-Name</span><span>></span></li>
<li><span>I-want-to-fit-like-the-li-width</span><span>></span></li>
<li><span>My-width-doenst-fit</span><span>></span></li>
</ol>
You could go for calc()
:
li > span:nth-child(1) {
margin-right: 3px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
width: calc(90% - 15px);
display: inline-block;
}
li > span:nth-child(2) {
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
width: 10px;
}
http://jsfiddle.net/d5pc8Lp3/3/
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