首页 > 代码库 > css实现两端对齐的3种方法
css实现两端对齐的3种方法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="monicaqin">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>css实现两端对齐的3种方法</title>
<style type="text/css">
body{
font-size:14px;
font-family: "微软雅黑";
}
*{
padding:0;
margin:0;
}
/*模块之间添加[空格/换行符/制表符]*/
.wraper{
width:1200px;
margin:0 auto;
}
h2{
margin:10px 0;
}
/*方法一：使用text-align:justify*/
.step {
text-align-last:justify;
text-align:justify;
width:600px;
margin:50px auto;
position:relative;
}
.step:after{
position:absolute;
top:50%;
left:0;
content:‘‘;
height:1px;
margin-top:-0.5px;
background:#ddd;
width:100%;
z-index:-1;
}
.step span {
display:inline-block;
text-align-last:center;
text-align:center;
width:16px;
height:16px;
line-height:16px;
color:#fff;
border-radius:50%;
background:#000;
}
/*方法二:使用justify-content:space-between*/
.demo {
margin:30px 0 0 0;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
}
.demo a{
width:20%;
display:inline-block;
height:44px;
line-height:44px;
text-align:center;
border:1px solid #428cc8;
color:#666;
font-size:16px;
margin-bottom:5px;
border-radius:3px;
background-color:#fefefe;
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));
color:#666;
text-decoration:none;
}
/*方法二:使用column(多列布局)*/
.example{
margin:30px 0 0 0;
-webkit-column-count:6;
-moz-column-count:6;
column-count:6;
-webkit-column-gap:20px;
-moz-column-gap:20px;
column-gap:20px;
}
.example a{
display:block;
height:44px;
line-height:44px;
text-align:center;
border:1px solid #428cc8;
color:#666;
font-size:16px;
margin-bottom:5px;
border-radius:3px;
background-color:#fefefe;
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));
color:#666;
text-decoration:none;
}
</style>
</head>
<body>
<div class="wraper">
<h2>使用text-align:justify</h2>
<hr/>
<p>模块内的元素之间为换行符</p>
<div class="step">
<span href="">1</span>
<span href="">2</span>
<span href="">3</span>
<span href="">4</span>
</div>
<p>模块内的元素之间为空格符</p>
<div class="step">
<span href="">1</span> <span href="">2</span> <span href="">3</span> <span href="">4</span> <span href="">5</span> <span href="">6</span>
</div>
<p>模块内的元素之间为无分隔符，justify不起作用</p>
<div class="step">
<span href="">1</span><span href="">2</span><span href="">3</span><span href="">4</span><span href="">5</span><span href="">6</span>
</div>
<h2>使用justify-content:space-between</h2>
<hr/>
<div class="demo">
<a class="link" href="http://www.mamicode.com/#none">10元</a>
<a class="link" href="http://www.mamicode.com/#none">20元</a>
<a class="link" href="http://www.mamicode.com/#none">30元</a>
<a class="link" href="http://www.mamicode.com/#none">50元</a>
</div>
<h2>使用column(多列布局)</h2>
<hr/>
<div class="example">
<a class="link" href="http://www.mamicode.com/#none">10元</a>
<a class="link" href="http://www.mamicode.com/#none">20元</a>
<a class="link" href="http://www.mamicode.com/#none">30元</a>
<a class="link" href="http://www.mamicode.com/#none">40元</a>
<a class="link" href="http://www.mamicode.com/#none">50元</a>
<a class="link" href="http://www.mamicode.com/#none">60元</a>
</div>
</div>
</body>
</html>
css实现两端对齐的3种方法