怎样用CSS将着四个div实现同一条线，水平居中？
代码如下：<html><head><title></title><styletype="text/css">.one{border:2pxsolidred;width:2...
代码如下：
<html>
<head>
<title></title>
<style type="text/css">
.one{
border:2px solid red;
width:250px;
height:50px;
text-align:center;
background:#999;
float:left;}
.two{
border:2px solid red;
width:250px;
height:50px;
text-align:center;
background:#066;
float:left;}
.three{
border:2px solid red;
width:250px;
height:50px;
text-align:center;
background:#C90;
float:left;}
.four{
border:2px solid red;
width:250px;
height:50px;
text-align:center;
background:#F6F;float:left;}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</body>
</html> 展开
<html>
<head>
<title></title>
<style type="text/css">
.one{
border:2px solid red;
width:250px;
height:50px;
text-align:center;
background:#999;
float:left;}
.two{
border:2px solid red;
width:250px;
height:50px;
text-align:center;
background:#066;
float:left;}
.three{
border:2px solid red;
width:250px;
height:50px;
text-align:center;
background:#C90;
float:left;}
.four{
border:2px solid red;
width:250px;
height:50px;
text-align:center;
background:#F6F;float:left;}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</body>
</html> 展开
2个回答
展开全部
设置它们的父级，如body：text-align:center;
给它们一个包含框如div，并设置：width、margin:0 auto;
<div id="d1">
<div class="i">one</div>
<div class="i">two</div>
<div class="i">three</div>
<div class="i">four</div>
</div>
#d1{text-align:center;}
.i{display:inline;margin: 0 auto; }
追问
效果不好，，这里面的四个盒子不是应该宽200 高50么，怎么这么小了？
#in{text-align:center; width:1000px; height:80px;}
.one,.two,.three,.four{display:inline;margin: 0 auto; }
#in是最外面的大盒子。
追答
哦哦，那就将display:inline;改为display:inline-block;就行了。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
