CSS 如何在div内对齐水平列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3524504/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to align horizontal list inside div?
提问by akonsu
i am trying to center my horizontal <ul> inside a <div> (the yellow stripe in my example). the markup is below. i know that if <li> were not floated then i could do it by setting left and right margins on <ul> to "auto", but i do not seem to find a way to get rid of "float" because i need my <li> be block elements so that i could size them. please help! thanks konstantin
我试图将我的水平 <ul> 放在 <div> 中（在我的例子中是黄色条纹）。标记如下。我知道如果 <li> 没有浮动，那么我可以通过将 <ul> 的左右边距设置为“自动”来实现，但我似乎没有找到摆脱“浮动”的方法，因为我需要我的<li> 是块元素，以便我可以调整它们的大小。请帮忙！谢谢康斯坦丁
<html>
<head>
<title></title>
<style type="text/css">
.container
{
background-color: yellow;
}
.container li
{
border: solid 1px grey;
display: block;
float: left;
height: 100px;
line-height: 100px;
list-style-type: none;
margin: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">x</a></li>
<li><div>y</div></li>
</ul>
<div style="clear: both;">
</div>
</div>
</body>
</html>
演示代表 OP 发布在： jsbinjsbin。
回答by Zaahid
is a block level element, and so takes up the entire width of container... also text-align is for aligning text. You could do something like:
是一个块级元素，因此占据了容器的整个宽度......还有 text-align 用于对齐文本。你可以这样做：
.container ul{
width:400px;
margin:0px auto
}
回答by Vinay B R
Try this, works on firefox and chrome
试试这个，适用于 Firefox 和 chrome
<html>
<head>
<title></title>
<style type="text/css">
.container
{
background-color: yellow;
text-align: center;
}
.container ul
{
display: inline-table;
text-align: center;
}
.container li
{
border: solid 1px grey;
display: block;
float: left;
height: 100px;
line-height: 100px;
list-style-type: none;
margin: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">x</a></li>
<li>
<div>
y</div>
</li>
</ul>
<div style="clear: both;">
</div>
</div>
</body>
</html>
回答by Ken
Not sure how to answer your question because I can't even see the yellow stripe in FF 3.6.8
不知道如何回答你的问题，因为我什至看不到 FF 3.6.8 中的黄色条纹
but have a look at this http://www.cssplay.co.uk/boxes/- there are many options and it might help you out.
但看看这个http://www.cssplay.co.uk/boxes/- 有很多选择，它可能会帮助你。
