Project accumulation (3) CSS and project accumulation css

Project accumulation (3) CSS and project accumulation css

The company is not specialized in website construction, and occasionally receives requests from customers to modify the front-end. Sometimes it is difficult to solve the browser compatibility problem.

Gradually accumulate.

Paste some front-end Code as follows:

1 <div class = "test"> 2 <form id = "Form1" runat = "server"> 3 <span> enter the following content: </span> 4 <asp: textBox ID = "txtCode" runat = "server" CssClass = "txt"> </asp: TextBox> 5 <asp: button ID = "btnOK" runat = "server" CssClass = "submit" Text = ""/> 6 <asp: button ID = "btnReset" runat = "server" CssClass = "submit" Text = ""/> 7 </form> 8 </div>

It should be aligned, but the result is:

　　

The text box and button are not aligned. view the source code of the page:

1 <span> enter the following content: </span> 2 <input name = "txtCode" type = "text" id = "input_code" class = "txt"/> 3 <input type = "submit" name =" submit "value =" "id =" btnOK "class =" submit "/> 4 <input type =" submit "name =" btnReset "value =" "id =" btnReset" class = "submit"/>

Style

 1 .txt{ 2    border:none;  3    width:218px;  4    height:37px; 5    background:url(images/text.jpg) no-repeat; 6    padding-left:5px; 7 } 8 .submit{ 9     border: none;10     width: 100px;11     height: 40px;12     background: url(images/test-sure.jpg) no-repeat;13     cursor: pointer;14 }

The most amazing thing is that I tried Firefox, Google, IE multi-version, and 360 multi-version. The display varies with browsers. The default value of browser resolution should be considered, there should be a default value setting problem, because I found the css dish on the Internet and found that it is the vertical-align style of the button, and set the uniform display to middle.

As shown below:

　　

Gradually accumulate and hope to grow on a daily basis.

　　

　　

How does css arrange three labels horizontally?

Brother, first point out your error:
The id value cannot start with a number.
Also, the value of id is unique, that is, it cannot be repeated.
So in HTML, you should first change it to this:
<Div class = "zong">
<Div id = "a01"> 01 </div>
<Div id = "a02"> 02 </div>
<Div id = "a03"> 03 </div>
</Div>
--------------------
The corresponding css should also be changed:
Then, you can move in one direction.

# A01 {width: 100px; height: 20px; border: 1px solid #003399; float: left ;}
# A02 {width: 100px; height: 20px; border: 1px solid #003399; float: left ;}
# A03 {width: 100px; height: 20px; border: 1px solid #003399; float: left ;}

You can use the same css as above, which can be abbreviated:

# A01, # a02, # a03 {width: 100px; height: 20px; border: 1px solid #003399; float: left ;}

The three boxes are arranged horizontally. What is the simplest way to write CSS?

<Style>
. Aaa {width: 200px; hight: 200px; background-color: gray;
Padding: 20px;
Border: solid 2px red ;}
. Zuo {
Width: 50px; height: 50px; background: #00e001;
Float: left ;}
. Zhong {
Width: 50px; height: 50px; background: # 00e0fe;
Float: left}
. You {width: 50px; height: 50px; background: # fff000;
}
</Style>