极客观点
项目管理
HarmonyOS
我想将左对齐项目列表居中。
这就是我目前拥有的：
<!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>
这会生成一个如下所示的页面：
我真正想要的是这样的：
我可以通过将 width: 200px; 添加到 #content ul --- 来实现这一点，但问题是我有很多这样的列表，它们都有不同的宽度。
我希望 <ul> 缩小到内容，以便它可以正确居中。还是我以错误的方式解决这个问题？
感谢您的任何帮助，您可以提供。
解决方案
将这四行添加到 #content ul 的 CSS 规则：
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
我已经在 IE6、IE7、IE8 和 Firefox 3.6 中对此进行了测试。结果看起来像上面的第二张图片，列表总是适合项目的内容。
原文由 Travis 发布，翻译遵循 CC BY-SA 4.0 许可协议
将
<ul>设置为使用display: inline-block;。请参阅 http://jsbin.com/atizi4 。请注意，IE ≤ 7 不支持（完全）
inline-block。