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

Question

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

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

这就是我目前拥有的:

<!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>

Run Code Online (Sandbox Code Playgroud)

这会产生一个看起来像这样的页面:

不是我想要的

我真正想要的是这样的:

这就是我想要的样子

我可以通过添加width: 200px;来实现这一点,#content ul但问题是我有很多像这样的列表,它们都有各种宽度.

我希望<ul>收缩到内容,以便它可以正确居中.或者我是以错误的方式来做这件事的？

感谢您的任何帮助,您可以提供.

解

感谢KennyTM和Magnar,这是解决方案:

将这四行添加到#content ulCSS规则中:

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

ken*_*ytm 26

设置<ul>使用display: inline-block;.见http://jsbin.com/atizi4.

请注意,inline-blockIE≤7不支持(完全).

然后,如果你将hasLayout添加到一个元素,然后将其设置为显示:inline after,你会很高兴知道IE支持内联块.这是黑客攻击:http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ (2认同)

归档时间：	15 年，1 月前
查看次数：	19117 次
最近记录：	15 年，1 月前