老师，难道这个练习只能通过计算实现居中效果吗？
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
*{
margin: 0;
padding: 0;
}
.container{
border: 1px dashed gray;
width: 636px;
padding-left: 10px;
margin: 10px;
overflow: hidden;
zoom:1;
}
.con ul li{
width: 200px;
list-style: none;
border: 1px solid gray;
float: left;
margin: 10px 10px 10px 0;
}
.con img{
width: 100%;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<ul>
<li>
<dt><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"></dt>
<dd>我是一段文字！</dd>
</li>
<li>
<dt><img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"></dt>
<dd>我是一段文字！</dd>
</li>
<li>
<dt><img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"></dt>
<dd>我是一段文字！</dd>
</li>
</ul>
<ul>
<li>
<dt><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"></dt>
<dd>我是一段文字！</dd>
</li>
<li>
<dt><img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"></dt>
<dd>我是一段文字！</dd>
</li>
<li>
<dt><img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"></dt>
<dd>我是一段文字！</dd>
</li>
</ul>
</div>
</body>
</html>
虽然实现了居中效果，但是我觉得这种方法太死板了，有没有更好的办法实现水平居中呢？
0
收起
正在回答
4回答
经测试同学粘贴的第二段代码实现效果是正确的呢。这道编程题如果使用一个大盒子包裹起来，就是需要通过精确的计算来确定宽度，没有问题。whiteDive’同学实现的方法也是可以的，但是我们要求的是使用float来实现。
祝学习愉快！
whiteDive
2018-11-16 21:29:10
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
}
.container{
padding: 10px;
border: red 1px dashed;
display: inline-block;
}
.imgBox{
width: 200px;
height: 100px;
margin: 10px;
border: black 1px solid;
display: inline-block;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="lineone">
<div class="imgBox"></div>
<div class="imgBox"></div>
<div class="imgBox"></div>
</div>
<div class="lineone">
<div class="imgBox"></div>
<div class="imgBox"></div>
<div class="imgBox"></div>
</div>
</div>
</body>
</html>同学你好 我是陆超 可以用div替代你的li 一行再一个div在包裹起来 设置浮动 这样就不用通过宽度起到换行的效果 happy everyday 真好 我也是学生 有说错的地方见谅
王小大
2018-11-16 20:01:44
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
*{
margin: 0;
padding: 0;
}
.container{
border: 1px dashed gray;
width: 636px;
padding-left: 10px;
margin: 10px;
overflow: hidden;
zoom:1;
}
.container ul li{
width: 200px;
list-style: none;
border: 1px solid gray;
float: left;
margin: 10px 10px 10px 0;
}
.container img{
width: 100%;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<ul>
<li>
<dt><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"></dt>
<dd>我是一段文字！</dd>
</li>
<li>
<dt><img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"></dt>
<dd>我是一段文字！</dd>
</li>
<li>
<dt><img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"></dt>
<dd>我是一段文字！</dd>
</li>
</ul>
<ul>
<li>
<dt><img src="http://img1.sycdn.imooc.com/climg//590fe9770001e63102400135.jpg"></dt>
<dd>我是一段文字！</dd>
</li>
<li>
<dt><img src="http://img1.sycdn.imooc.com/climg//590fe97d00011bda02400135.jpg"></dt>
<dd>我是一段文字！</dd>
</li>
<li>
<dt><img src="http://img1.sycdn.imooc.com/climg//590fe982000150ba02400135.jpg"></dt>
<dd>我是一段文字！</dd>
</li>
</ul>
</div>
</body>
</html>上述代码发错了，纠正一下！
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星