CSS放置HTML元素

我正在尝试对HTML元素进行排序。基本上，我想把ulli菜单（inline）设置在右边，左边的输入占据所有剩余的空间，而不是固定的，所有这些都在一行中。3个LI元素，根据需要占用尽可能多的空间（最小，不是固定的，因为我可能会添加一些元素），并输入尽可能多的其他元素（100%保留在行中）

我尝试了各种显示：块、内联、内联块、表格、表格单元格（我几乎成功了）、左浮动、右浮动，如果不在某些东西上设置固定宽度，我就无法设置它

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

也许是为了增加利润，溢出，黑客

请帮忙

---

来自Alohci的答案是我一直在寻找的！我是这样解决的：

   <main> 
        <div id="searchBar">
            <div id="searchText">
              <form>
                <input id="searchQuery" />
              </form>
            </div>
            <div id="searchOptions">
              <ul>
                <li><a href="#">Cla</a></li>  
                <li><a href="#">Res</a></li>  
                <li><a href="#">Pro</a></li>
              </ul>
            </div>
        </div>
    </main>

main div#searchBar {
    display:table;
    width:100%;
}

main div#searchText {
    display:table-cell;
    width:100%; 
}

main div#searchOptions {
    display:table-cell;
    width:100%;
}

main input#searchQuery { width:100%; }

main ul { display:table; }

main ul li { display:table-cell; }

main ul li a { display:table-cell; }

主分区#搜索栏{
显示：表格；
宽度：100%；
}
主分区#搜索文本{
显示：表格单元格；
宽度：100%；
}
主分区#搜索选项{
显示：表格单元格；
宽度：100%；
}
主输入#searchQuery{宽度：100%；}
主ul{显示：表；}
主ulli{显示：表格单元格；}
主ul li a{显示：表格单元格；}

我在元素周围创建了更多的div，并将main div作为表，将那些div作为单元格，然后将UL作为表，LI作为单元格。。。我猜之前它不能作为表单工作，输入不在div中，并且不能100%填充到UL

但阿洛奇给了我更紧凑的版本，THNX

你能用一张纸画出来吗

   <main> 
        <div id="searchBar">
            <div id="searchText">
              <form>
                <input id="searchQuery" />
              </form>
            </div>
            <div id="searchOptions">
              <ul>
                <li><a href="#">Cla</a></li>  
                <li><a href="#">Res</a></li>  
                <li><a href="#">Pro</a></li>
              </ul>
            </div>
        </div>
    </main>

main div#searchBar {
    display:table;
    width:100%;
}

main div#searchText {
    display:table-cell;
    width:100%; 
}

main div#searchOptions {
    display:table-cell;
    width:100%;
}

main input#searchQuery { width:100%; }

main ul { display:table; }

main ul li { display:table-cell; }

main ul li a { display:table-cell; }