css ul li 居中问题，li left之后还是实现居中

qqbnb889 2016-09-27 10:12:26

代码如下，像是这种，如何让多个li float之后，还是居中？我给ul加了宽度之后，只是ul居中，UL里面的li还是float：left排列，怎么实现ul里面的li居中？

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

ul{

	list-style:none;

	margin:0 auto;

	text-align:center;

	background-color:#90F8B5}

	

	li{

		width:72px;

		height:38px;

		background-color:#999;

		margin:15px;

		float:left;}

</style>

</head>



<body>

<div>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

</div>

</body>

</html>

...全文

1330 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

香蕉猪 2016-10-28

打赏
举报

给ul一个宽度就能居中了。。。

JPF1024 2016-10-28

打赏
举报

设置个宽度不就可以了？

俊刚、 2016-10-27

打赏
举报

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

ul{

    list-style:none;

    margin:100px auto;

    text-align:center;

	width:600px;

	height:100px;

    background-color:#999;

}

 

li{

	width:72px;

	height:38px;

	line-height:38px;

	background-color:blue;

	margin:31px;

	float:left;

}

</style>

</head>

 

<body>

<div>

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</div>

</body>

</html>

这个效果你看是否可以？

wenlong_15 2016-10-11

打赏
举报

是水平居中还是垂直居中

布尔凯索LST 2016-10-11

打赏
举报

扑鸡仔 2016-09-30

打赏
举报


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both;font-size: 0px; }
.clearfix { zoom:1; }
div{text-align: center; background-color: #000;}
ul{
    list-style:none;
    margin:0 auto;
    background-color:#90F8B5;
   display: inline-block;
}
    li{
        width:72px;
        height:38px;
        background-color:#999;
        margin:15px;
        float:left;}
</style>
</head>
 
<body>
<div>
<ul class="clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>