Question

我试图对HTML元素进行排序。基本上，我想将UL LI菜单（内联）设置到右侧，将左侧的INPUT设置为占用所有剩余空间，而不是固定，以及1行中的所有空间。 3个LI元素，占用尽可能多的空间（最小，不固定，我可能会添加一些元素），INPUT尽可能地采取其他所有内容（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>

可能会留下一些利润，溢出，黑客？

请帮忙！

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%;
}

Answer 2

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

我在元素周围创建了更多div，并将主div作为表格，将div作为单元格，然后将UL作为表格，将LI作为单元格......我猜之前它不能用作FORM和INPUT不是在div中，并且无法100％填写UL ......

但是Alochi给了我更紧凑的版本，THNX！

CSS放置HTML元素

2 个答案: