如何使输入填充剩余空间

Question

在这种情况下，我有li.first填充整行（100％）和li.third，它将具有可变大小，具体取决于文本（从外部服务返回）。

我需要让li.second与li.third一起填充一行。在li.second我有一个input，必须填充整个行，而不是由li.third中包含的链接填充的空间。

我找到了一些方法，但我需要更改我的HTML代码，在这种情况下我不能。

有没有办法在不改变HTML的情况下做到这一点，仅使用CSS？

 <ul>
        <li class="first">Some Random Text</li>
        <li class="second">
            <input type="text" />
        </li>
        <li class="third">
            <a href="#">Some Random Text (that will change time to time)</a>
        </li>
    </ul>

Answer 1

将li元素设置为display:inline-block并浮动它们：

ul li {
  display: inline-block;
  float: left;
}

不要忘记清除浮动：

ul:after {
  content: "";
  display: block;
  clear: both;
}