解决方案

Question

我想集中左对齐项目列表。

这就是我目前所拥有的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Shrinkwrapped List</title>
    <style type="text/css">
      #wrapper {
        margin: auto;
        width: 500px;
        border: solid 1px #CCCCCC;
      }
      #header {
        text-align: center;
       font-size: 200%;
      }
      #content {
        text-align: center;
      }
      #content ul {
        text-align: left;
        font-size: 150%;
        list-style-type: none;
        margin: 20px auto;
        padding: 0px;
        border: solid 1px #666666;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="header">
        Shrinkwrapped List
      </div>
      <div id="content">
        <ul>
          <li>Lorem ipsum</li>
          <li>Dolor sit amet</li>
          <li>Consectetur</li>
          <li>Adipiscing elit</li>
          <li>Morbi odio</li>
          <li>Mi blandit vehicula</li>
        </ul>
      </div>
    </div>
  </body>
</html>

生成一个看起来像的页面：

Not really what I want

我真正想要的是：

This is the look I want

我可以通过将width: 200px;添加到#content ul来实现此目的，但问题是我有很多这样的列表，并且它们都有各种宽度。

我希望<ul>缩小到内容，以便正确居中。或者我是以错误的方式解决这个问题？

感谢您提供的任何帮助。

解决方案

感谢KennyTM和Magnar，以下是解决方案：

将这四行添加到#content ul的CSS规则中：

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

我在IE6，IE7，IE8和Firefox 3.6中测试了这个。结果看起来像上面的第二个图像，列表总是适合项目的内容。

Answer 1

将<ul>设置为使用display: inline-block;。请参阅http://jsbin.com/atizi4。

请注意，IE≤7不支持inline-block。

Answer 2

您可以采用my previous answer。用于IE的内联块，显示：用于现代浏览器的表。可能需要明确指定list-style-type。

编辑：由于这是一个列表，因此可以在inline-block上使用ul而不显示：表格。 您需要在IE display:inline;之后的单独规则inline-block中声明。

Answer 3

我会考虑使用CSS并在margin: 0 auto上放置<ul>最大宽度容器。

Answer 4

试试这个。它涉及不兼容性，但我不知道旧浏览器如何处理边距和填充以及所有这些因为我只使用新的浏览器。它只涉及对CSS的一些小改动。

/* I didn't style the other parts, so I'm taking them out to save space. */

#content {
    margin: 0 auto;
}

#content ul {
    border-top: solid 1px #666666;
    border-bottom: solid 1px #666666;
    text-align: left;
    font-size: 150%;
    list-style-type: none;
    margin: 20px auto;
    padding: 0px;
    width: 202px;
}

#content li {
    border-left: solid 1px #666666;
    border-right: solid 1px #666666;
    margin: 0 auto;
    padding: 0;
    width: 200px;
}

编辑：我想澄清一下我的变化。我改变了内容的对齐方式，但老实说，你可以改回来，我认为它没有效果。

我最初做的是设置一个固定的宽度并居中你的li元素，你没有造型。这只是内容的中心。您放置的边框位于ul上，因此非常宽，但如果我们将其放在li中，那么我们会有很多方框。所以，我分割了边框样式。 #content ul宽度为202px的原因是因为边框数量在宽度的外侧。

我希望这个解释清楚地说明了它的工作原理。祝好运！我在谷歌浏览器中对此进行了测试。

我可以将<ul>与左对齐<li> s居中吗？</li> </ul>

解决方案

4 个答案: