CSS放置HTML元素

我想排序HTML元素。基本上，我想将UL LI菜单（内联）设置在右侧，而左侧的INPUT将剩余的所有空间（不固定）和所有剩余空间放在一行中。 3个LI元素，尽可能多地占用它所需要的空间（最小化，而不是固定的，我可能会添加一些元素），并且INPUT尽可能地将所有其他元素（100％的剩余空间）排除在外。CSS放置HTML元素

我尝试了各种显示：block，inline，inline-block，table，table-cell（这个我几乎成功了），float left，right，我不能在没有固定宽度的情况下设置它。 ..

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

也许会把一些利润，溢出，黑客？

请帮忙！

来源

2014-04-18 Gem

你可以在[小提琴？]（http://jsfiddle.net/）中绘制它吗？ – 13ruce1337

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

来源

2014-04-19 00:56:12 Alohci

回答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为表和李的作为细胞后...我猜之前它没有工作，因为FORM和INPUT没有在div中，并且无法100％填充到UL ...

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

来源

2014-04-19 12:41:18 Gem

CSS放置HTML元素

回答

相关问题