html - CSS 放置 HTML 元素

Question

我正在尝试对 HTML 元素进行排序。基本上，我想将 UL LI 菜单(内联)设置在右侧，左侧的 INPUT 占用所有剩余空间，而不是固定的，所有这些都在 1 行中。 3 个 LI 元素，根据需要占用尽可能多的空间(最小，不固定，因为我可能会添加一些元素)，INPUT 尽可能多地占用其他所有内容(100% 的剩余内容)。

我尝试了各种显示: block 、内联、内联 block 、表格、表格单元格(我几乎成功了)、向左浮动、向右浮动，如果不在某些东西上放置固定宽度我就无法设置它。 .

   <main> 
      <div id="searchBar">

    <form>
      <input id="searchInput"/>
    </form>

        <ul id="searchOptions">
          <li><a href="#"></a></li>  
          <li><a href="#"></a></li>  
          <li><a href="#"></a></li>
        </ul>

      </div>
    </main>

也许要放一些边距、溢出、hack？

请帮忙!

Answer 1

Like this, maybe?

ul { 
    list-style-type: none;
    display: table-cell;
    width: 1px;
    padding:0 0 0 5px;
}
form {
    display:table-cell;
    width:100%;
}
li { 
    display:table-cell;
    white-space: nowrap;
    padding:0 5px
}
input {
    width:100%;
}