html - 制作 2 个跨度以扩展以适应 li 宽度

Question

我希望我的两个 span 扩展以适合我的 li 元素。

在最初的元素中，我也使用了 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>

li元素中第一个span是元素名，第二个span是“navigator”。

我希望第一个 span 宽度填充 li 元素的其余部分。

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>