一、input::before失效
原因:很多类型的input都不支持伪类,buttom 、 number 、text 、 email 等等。
原代码
//html
<input type="text">
//css
nav .daohang input::before{
content: '';
position: absolute;
left: 2px;
top: 4px;
width: 18px;
height: 18px;
/* ps */
/* background-color: red; */
background: url('../images/sprites.png') -80px -70px;
}
解决办法:input外面套上了另一个div 不对input使用伪类 对div使用
html
<div class="search">
<input type="search">
</div>
css
.search {
position: relative;
float: left;
}
.search::before {
content: '';
position: absolute;
left: 2px;
top: 4px;
width: 18px;
height: 18px;
/* ps */
/* background-color: red; */
background: url('../images/sprites.png') -80px -70px;
}
.search input {
width: 172px;
height: 31px;
/* vertical-align: center; */
padding-left: 31px;
border-bottom: 2px solid #e7e7e7;
}
二、使行内元素宽高生效的几种方法
1.将行内元素转换为行内块元素或者块元素
2.赋予定位、
定位的特殊特性,【绝对定位会使行内元素具有行内元素的特点,行内元素的宽高由内容决定】
3.赋予浮动
float就是隐性的把内联元素转化为块元素,这是对内部的特性就是有物理特性,但是他不占据一行。对外是内联元素的属性。他有个坏处就是会影响兄弟元素。相当于:display:inline-block;