使容器<ul>元素中的所有<li>元素具有相同的宽度</ul> </li>

Question

我一直在努力解决这个问题已经有一天左右了，我已经回去了几次从广场开始，但我正试图让一个水平的css弹出标题按照我想要的方式工作。 / p>

我希望根据需要扩展下拉位（如果类别名称被强制放在一行，那就太棒了），而容器会扩展以容纳它们。小提琴会更好地解释。

http://jsfiddle.net/HyuLy/

有什么想法吗？

Answer 1

要使<li>容器内的所有<ul>元素具有相同的宽度，请添加以下内容：

div#dropMenu ul.level2 li {width: 100px;}

Answer 2

将代码更改为以下内容以填充<li>内的<ul>元素，但这不会重新调整容器<ul>的大小以扩大容纳<li>。

.subCatodd{
    background-color:#7b631d;
    padding:10px 0;}
.subCateven {
    background-color:#665011;
    padding:10px 0;}

Answer 3

由于你的width: 100%，你有几个padding破坏了你的布局。 width是元素的内部宽度，因此当您将width:100%与padding:20px组合时，您的元素现在为100％+ 40px。

此外，您还有一些float: left也不应该存在。如果您正在垂直堆叠元素，则无需float: left。

看看这个：http://jsfiddle.net/scrimothy/mxW4y/

由于此处有很多内容，您可能需要将此css复制回文本编辑器以更好地查看。我删除了一些宽度和浮动

Answer 4

检查

http://jsfiddle.net/XUj5S/

当您开始添加填充到100％宽度时，它将完全正确，这就是为什么你的li对象开始覆盖他们的父母他们不是100％他们就像填充的110％cuz你要补充一下，这是我所说的一个例子......

http://jsfiddle.net/EcENF/

如果你开始根据px添加填充，你必须在px上定义宽度，使用％只会搞乱事情