Question

为什么我在float:left中使用<ul>样式，nav bar变得非常大？

就像这个例子：

 <ul class="nav" id="ModuleContainer" runat="server" style="float:left">
   <li>111111----------------------</li>
   <li>111111----------------------</li>
   <li>111111----------------------</li>
   <li>111111----------------------</li>
   <li>111111----------------------</li>
   <li>111111----------------------</li>
   <li>111111----------------------</li>
   <li>111111----------------------</li>
   <li>111111----------------------</li>
 </ul>

http://jsfiddle.net/65qggwch/1/

如果我不使用浮动nav bar＆＃34;隐藏＆＃34;超出显示屏幕的元素（完全是我想要的结果）：

 <ul class="nav" id="ModuleContainer" runat="server" style="float:none">
   <li>111111----------------------</li>
   <li>111111----------------------</li>
   <li>111111----------------------</li>
   <li>111111----------------------</li>
   <li>111111----------------------</li>
   <li>111111----------------------</li>
   <li>111111----------------------</li>
   <li>111111----------------------</li>
   <li>111111----------------------</li>
 </ul>

http://jsfiddle.net/65qggwch/

唯一的问题是没有float:left我有2行而不是第二个例子。

Answer 1

您可以使用flex元素执行您要查找的内容：

/* Create a container that will group its children on a single line */
.containerModule {
    display: flex; 
}

/* The arrow elements should fit to the content */
.sxprova,
.dxprova {
    flex: 0; 
}

/* The nav container should take the available space */
.containerModule > div {
    flex: 1; 
}

http://jsfiddle.net/tzi/tnhwuqh1/

注意flexbox support：IE 10+，需要很多供应商前缀！

HTML：样式浮动和导航样式之间的冲突？

1 个答案: