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

Question

为什么如果我在 <ul> 中使用 float:left 样式，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/

如果我不使用float nav bar "hide"超出显示屏幕的元素（正是我想要的结果）：

 <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: 样式浮动和导航样式之间的冲突？

HTML: Conflict between style float and nav style?

html

css

html-lists