当子元素浮动时，'max-width'属性不起作用？

Question

我想在其子元素浮动的容器元素上设置max-width。我该怎么做？

默认情况下，max-width属性在给定方案中不起作用（但min-width确实如此）。 Here's a fiddle您可以用来帮助我解决问题。

查看小提琴的预览窗格 - 这就是我所说的（.dropdown-menu类定义了相关的样式）：

但这应该看起来像（有点）：

Answer 1

将position:absolute;替换为position:fixed;

并将left:0px;更改为left:35px;

更新过的笔：http://codepen.io/joe/pen/hzDaG

Answer 2

在position:absolute

中将position: fixed;更改为.dropdown-menu

width/height:100%无法使用绝对位置。

.dropdown-menu {
    position: fixed;
    top: 36px;
    left: 35px; 
    z-index: 1000;
    display: none;
   max-width: 100% !important; 
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12);
    color: #222;
}

<强> DEMO

Answer 3

为什么不使用而不是最大宽度，以这种方式工作..或者放一个div来封装ul标签然后放一个宽度

Answer 4

这些引言应该回答这个问题：

  

浮动箱位于正常流量内，然后从流量中取出并尽可能向左或向右移动。内容可能会沿着浮动的一侧流动。

     

当一个盒子从正常流程中取出时，仍然在正常流程内的所有内容将完全忽略它并且不为它腾出空间。

     

您应始终在浮动项目上设置宽度（除非直接应用于图像 - 具有隐式宽度）。如果未设置宽度，则结果可能无法预测。

     

首先，浮动的框应该具有明确或隐式定义的宽度。否则，它将水平填充其包含块，就像非浮动内容一样，不会留下其他内容在其周围流动的空间。其次，与正常流程中的方框不同，浮动方框的垂直边距不会折叠，方框的上方或下方的边距也会折叠。最后，浮动框可以与正常流中与其相邻的块级框重叠。

- 通过Smashing Magazine

因此，您唯一的选择是min-width和width。