使两个span元素扩展以适应li宽度

Question

我希望我的两个span能够扩展以适应我的

元素。

在原始项目中，我也使用了bootstrap和jquery，但这个示例已经足够了：

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>

元素中的第一个 span 是元素名称，第二个 span 是“导航器”。

我希望第一个 span 的宽度填满整个 li 元素。

- Sly321

---

你有试过任何编程的 Fiddle 吗？ - Sai Deepak

我尝试了min-width，width: 100%，但没有任何效果。顺便说一下，fiddle在帖子里。 - Sly321

我希望它们的宽度与最宽的元素名称跨度一样宽（因此适合它们所在的现有 li 元素）。 - Sly321

注意：> 无效，请使用 > 替代。 - Oriol

谢谢留言，Oriol！ - Sly321

Answer 1

您可以使用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>

- Oriol

---

这个非常好用！谢谢。5分钟后确认。 - Sly321

Flex是一只野兽。它起初非常粗糙，但它正在成长：无论是在功能上还是在我的心中。 - Mave

Answer 2

您可以选择使用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/

- Mave

---

这也非常好，反正我不知道calc()语句，需要用它几次。谢谢你！ - Sly321