CSS icon text alignment and form input box text alignment compatibility example

1. Icon and text alignment

General icon and text alignment HTML code:

<p><i class= "icon" ></i> Front-End development blog </p>

<p><a href= "javascript:" class= "icon" > Delete </a> front-end Development blog </p>

Zxx CSS Code:

p{line-height:20px; font-size:14px;}
. Icon {
Display:inline-block;
width:20px; height:20px;
Background:..;
White-space:nowrap;
Letter-spacing: -1em;
Text-indent: -99em;
Color:transparent;
* IE7 * *
*text-indent:0;
*zoom:expression (this.runtimestyle[' zoom '] = ' 1 ', this.innerhtml = ' \3000 ');
}
. icon:before {
/* pseudo element Insert space text * *
Content: ' \3000 ';
}

This code is mainly through Line-height to control the text of the icon and the adjacent text is also high, implemented in the same line.

2. Form input box and content alignment

A simple text and text input

<div class= "Clearfix mt15" >
<label class= "left" > Mobile phone number <span class= "Red abs" >*</span></label>
<div class= "Cell" >
<input type= "Tel" class= "Ui_input" name= "tel" required= "" >
</div>
</div>

CSS code:

body{font:14px/1.42858 ' Microsoft Yahei ', Arial, Sans-serif;-webkit-font-smoothing:antialiased}/* Line height is 20 pixels */
. cell {
Display:table-cell;
*display:inline-block;
width:2000px;
*width:auto;
}
Input.ui_input,
. ui_input > Input {
height:20px
line-height:20px;
padding:9px 8px;
border: 1px solid #d0d0d5;
Border-radius:4px;
Background-color: #fff;
Font-size:14px;
Outline:none;
Color: #545a6c;
-webkit-transition:border-color 15s, Background-color 15s;
Transition:border-color 15s, Background-color. 15s;