使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>

第一span在 li元素是元素名称,以及第二span是"导航器".

我希望第一个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>

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/