<!doctype html>
<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 ways to align the two sides </title>
<style type= "Text/css" >
body{
font-size:14px;
Font-family: "Microsoft Jas Black";
}
*{
padding:0;
margin:0;
}
/* Add [space/Line break/tab]*/] between modules
. wraper{
width:1200px;
margin:0 Auto;
}
h2{
margin:10px 0;
}
/* Method One: Use 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;
}
/* Method Two: Use 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;
}
/* Method Two: Use Column (multi-column layout) */
. 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>
<body>
<div class= "Wraper" >
Line breaks between elements in the <p> module </p>
<div class= "Step" >
<span href= "" >1</span>
<span href= "" >2</span>
<span href= "" >3</span>
<span href= "" >4</span>
</div>
Spaces between elements in the <p> module are space characters </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>
There is no delimiter between elements within the <p> module, justify does not work </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>
<div class= "Demo" >
<a class= "link" href= "#none" >10 yuan </a>
<a class= "link" href= "#none" >20 yuan </a>
<a class= "link" href= "#none" >30 yuan </a>
<a class= "link" href= "#none" >50 yuan </a>
</div>
<div class= "Example" >
<a class= "link" href= "#none" >10 yuan </a>
<a class= "link" href= "#none" >20 yuan </a>
<a class= "link" href= "#none" >30 yuan </a>
<a class= "link" href= "#none" >40 yuan </a>
<a class= "link" href= "#none" >50 yuan </a>
<a class= "link" href= "#none" >60 yuan </a>
</div>
</div>
</body>
3 ways to align CSS with two sides