今天在项目中碰到了设计盒子两端对齐的栗子，咱们用inline-block方法轻松的解决了，下面是我的经验：
原理： 利用文字text-align：justify; 操纵inline-block盒子，能够实现盒子两端对齐。
说明： inline-block元素 会按照基线对齐的方式两列，给这个元素的父盒子设置一个text-align：justify； 即可实现两端对齐的功能
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>盒子两端对齐</title> 6 </head> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 html,body { 13 width: 100%; 14 height: 100%; 15 } 16 .box { 17 width: 100%; 18 height: 100%; 19 /* 设置元素两端对齐 */ 20 text-align: justify; 21 } 22 /* 这里的伪元素一定要加上，不然span元素不能两端对齐 */ 23 .box:after { 24 content: ""; 25 display: inline-block; 26 overflow: hidden; 27 width: 100%; 28 } 29 .box span { 30 width: 50px; 31 height: 50px; 32 /* 设置盒子为行内块 */ 33 display: inline-block; 34 background-color: skyblue; 35 /* 设置盒子内元素水平居中 */ 36 text-align: center; 37 /* 设置盒子内容垂直居中 */ 38 line-height: 50px; 39 } 40 </style> 41 <body> 42 <div class="box"> 43 <span>1</span> 44 <span>2</span> 45 <span>3</span> 46 <span>4</span> 47 <span>5</span> 48 </div> 49 </body> 50 </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>盒子两端对齐</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
100%;
height: 100%;
}
.box {
100%;
height: 100%;
/* 设置元素两端对齐 */
text-align: justify;
}
/* 这里的伪元素一定要加上，不然span元素不能两端对齐 */
.box:after {
content: "";
display: inline-block;
overflow: hidden;
100%;
}
.box span {
50px;
height: 50px;
/* 设置盒子为行内块 */
display: inline-block;
background-color: skyblue;
/* 设置盒子内元素水平居中 */
text-align: center;
/* 设置盒子内容垂直居中 */
line-height: 50px;
}
</style>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
从小就喜欢看科幻片，特别是电影里面几行代码就能够获得，然后解救全世界的神秘的人，当然最感兴趣的就是代码本身了