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

Source: Internet
Author: User

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


Answers to a layout question about Altar friends


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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.