Question

我有一个包含以下内容的容器：

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

如同：http://sneakyrascal.com/gmat/conv/select-plan.html 并且<li>的CSS设置在左侧，因此它们可以在一行中。如果我删除一个<li>，则会在右侧添加一个空格。像这样：http://sneakyrascal.com/gmat/conv/select-plan-2.html 当我删除<li>时，我希望其他人居中而不是向左浮动。但我现在无法删除float:left他们需要在一个订单中。我怎么能绕过它呢？我为margin: auto;尝试<ul>，但它没有用。

Answer 1

如果你完全限制使用浮点数来实现这一点，那么你需要一些方法来计算容器的宽度应该给出元素的数量，并以某种方式应用它直接到容器。然后保证金：汽车应该正常工作。

为什么呢？因为当您浮动项目时，容器不再使用它们来计算其宽度。

按原样，您似乎将width: 1050px直接应用于容器。您可能希望从样式表中删除此样式声明，然后（如果可以）动态地将类名称（例如column-4或column-5（取决于计数））插入容器，然后使用适当的方式为每个类设置样式宽度。

但是，如果您可以使用其他布局方法，那么您有几个更好的选择：

在lis上应用display:inline-block，例如：http://jsfiddle.net/HPeAK/

注意： 1）ie6不会将display:inline-block应用于本地块的元素，例如<li>，所以如果IE6支持是必不可少的（哎呀！），则需要在该项内部使用span并应用{ {1}}那里。

2）内联块将引入它们存在于源中的空格，因为它们被视为内联元素。

或

在容器或ul上应用display：table，并在display:inline-block上显示：table-cell，如下所示：http://jsfiddle.net/3efZJ/

Answer 2

我发现，如果您将UL设置为display: table，则margin: 0 auto将对此进行处理并将其置于中心位置。替代方案是将UL设置为display: inline-block并在容器div上使用text-align: center来定位它。有了这两个，虽然你会看到IE7及以下的问题。它不支持display: table直接display: inline-block仅适用于自然内联的元素，而UL不适用。

Answer 3

制作容器overflow: hidden：

.select-plan #container {
    float: left;
    margin: 0 auto 40px;
    overflow: hidden;
    width: 1050px;
}

将列表设置为float: left; left: 50%; position: relative; margin: 0 auto，如下所示：

.select-plan #container ul {
    float: left;
    left: 50%;
    margin: 0 auto;
    position: relative;
    list-style-type: none;
}

像这样列出项目right: 50%

.select-plan #container ul li {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DBDBDB;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 1px #666666;
    float: left;
    height: 418px;
    margin-right: 10px;
    overflow: hidden;
    position: relative;
    width: 187px;
    right: 50%;
}

这个黑客应该有效。它并不理想但是嘿，它总比没有好。

Answer 4

如果你没有给ul的宽度赋值，你就不能使用自动左/右边距。

如果使用编程语言生成此页面，则可以计算已使用LI元素固定的UL元素的宽度。

因此，对于第二个示例，您可以为UL元素设置796px的宽度，以获得所需的效果。

Answer 5

.select-plan #container ul {
    margin-left: 9em;
}

它不是动态的，但它将集中4个容器。

将容器内的左浮动<li>标记居中</li>

6 个答案: