Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Making 2 spans to expand to fit into li width

Tags:

html

css

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.

like image 671
Sly321 Avatar asked Jul 13 '15 13:07

Sly321


People also ask

How do I put two spans side by side?

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.

How do you increase the width of a span tag?

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.

Can I add width in span?

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.

Can you have multiple spans?

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.


2 Answers

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>&gt;</span></li>
  <li><span>I-want-to-fit-like-the-li-width</span><span>&gt;</span></li>
  <li><span>My-width-doenst-fit</span><span>&gt;</span></li>
</ol>
like image 83
Oriol Avatar answered Nov 13 '22 09:11

Oriol


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/

like image 20
Mave Avatar answered Nov 13 '22 09:11

Mave