Как сделать ввод заполнить оставшееся пространство

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

Set вы li элементы к display:inline-block и всплывают их:

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

Не забудьте очистить поплавок:

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