作业帮怎样用CSS将着四个div实现同一条线,水平居中?
来源：学生作业帮 编辑：作业帮 分类：综合作业 时间：2024/05/15 18:20:46
怎样用CSS将着四个div实现同一条线,水平居中?
代码如下：
<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>
设置它们的父级,如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;就行了。
<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;就行了。