我试图将水平<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>
Run Code Online (Sandbox Code Playgroud)
是块级元素,因此占用容器的整个宽度... text-align用于对齐文本.你可以这样做:
.container ul{
width:400px;
margin:0px auto
}
Run Code Online (Sandbox Code Playgroud)