列表margin处理方案
html
<ul class="list clearfix">
<li></li>
<li></li>
<li></li>
</ul>
css
li {
margin-right:30px;
}
ul {
margin-right:-30px;
}
实现高度可控的分割线
split.png
html
<span class="register">注册</span>
<span class="split"></span>
<span class="logout">退出登录</span>
css
.split {
padding: 11px 6px 2px 0; //控制分割线的位置
margin-left: 5px;
font-size: 0;
border-left: 2px solid #000;
}
demo3
demo3.jpg
html
<div class="demo3">
<h5><i></i><span>慕课网nodejs</span><i></i></h5>
</div>
css
.demo3 {
margin-top: 100px;
text-align: center;
}
.demo3>h5>i {
display: inline-block;
height: 2px;
width: 100px;
background-color: red;
vertical-align: middle;
}
.demo3>h5>span {
display: inline-block;
margin: 0 20px;
}
多行文本居中
demo4.jpg
html
<div class="line">
<p>多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居</p>
</div>
css
.demo4 .line {
/*position: absolute;*/
/*float: left;*/
display: table-cell;
vertical-align: middle;
width: 150px;
height: 200px;
padding: 0 20px;
border: 1px solid #000;
}
利用table-cell 不兼容ie7，父元素不能带有破坏属性float和absolute
不定宽的块状元素居中
1.在最外层套table(包含tbody tr td) 设置table属性 margin: 0 auto；
2.只能兼容7以上
html
<div class="wrap">
<ul>
<li></li>
<li></li>
</ul>
</div>
css
.wrap {
text-align: center;
}
.wrap>ul {
display: inline-block;
}
3.具体看demo
html
<div class="wrap">
<ul>
<li></li>
<li></li>
</ul>
</div>
css
.wrap {
float: left;
position: relative;
left: 50%;
}
.wrap>ul {
position: relative;
left: -50%;
}
