Q: How can I solve a layout problem of altar friends?

Q: How can I solve a layout problem of altar friends?

Source: http://www.ido321.com/1147.html

Requirement: Let select, ul, text, button, text display in a line, effect Stamp: http://bbs.csdn.net/topics/390915380? Page = 1 # post-398415668

 

My implementation is as follows:

HTML:

<! DOCTYPE html> 
CSS:
ul    {        list-style: none;    }    .pagediv    {        float: left;    }    ul li    {        float: left;    }    a    {        text-decoration: none;        display: block;        border: 1px solid #ccc;        text-align: center;        line-height: 24px;        width: 24px;        height: 24px;    }    a:hover    {        text-decoration: none;        color: red;    }    .seldiv    {        float: left;        margin: 20px;    }
Effect:



Next article: web page crawling: Summary of Web Page crawling methods implemented by PHP




A question about ul li's css layout
<Style>
Ul {width: 200px; text-align: center; margin: 0; padding: 0 ;}
Li {list-style: none; width: auto; margin: 0; padding: 0 ;}
Ul. s {margin: 0 auto ;}
</Style>

<Ul>
<Li style = "float: left"> 111 </li>
<Li style = "float: right;"> 333 </li>
<Li class = "s"> 2222222222 </li>
<Li style = "clear: both;"> </li>
</Ul>
I tried it. Yes!

I would like to ask you a question about CSS layout.
The three sub-div classes are the same, and CSS cannot be separated.
Method 1:
Use style to control styles, such as <div class = "item" style = "width: 200px;"> column 1 </div> Method 2:
Add a new style to the three divs and use CSS control, for example: <div class = "box"> <div class = "item item1"> column 1 </div> <div class = "item item2"> column 2 </div> <div class = "item item3"> column 3 </div> <style>. item {width: 500px;}/* This class must be placed before item1/2/3 */. item1 {width: 200px ;}. item2 {}. item3 {}</style>/* Note: The item1/2/3 style must be placed behind the item, because in CSS, the subsequent permission is higher than the previous one. If you put the item behind it, it will always be 500. * // * However, if you write this: */<style>. box. item1 {width: 200px ;}. box. item2 {}. box. item3 {}. if the item {width: 500px ;}</style>/* is written in this way, although the item is put behind it, theoretically the item has the highest permission, and the three sub-div should display 500. However, the level defined by item1/2/3 is relatively deep, and its permission is higher than that defined by item. Therefore, the higher the definition level, the higher the permission. */Method 3: Use jQuery to control
$ (". Box div: eq (0) ").css (" width "," 200px "); // The first sub-div $ (". box div: eq (1) ").css (" width "," 300px "); // the second sub-div $ (". box div: eq (2) ").css (" width "," 400px "); // The third sub-div