XHTML+CSS skills: Using overflow to achieve a multiple-column list of spacing

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Multiple-column lists are often needed in web design, and the list in table design is well made. So how do we make multiple-column lists in Div? First, let's take a look at a simple list of the following code:

< div id = "List" >

< ul >

< li > </li >

< li > </li >

< li > </li >

< ul >

</div >

OK, let's say we need to make a three-column list with a width of 300px and 100 pixels per li. The CSS style is as follows:

/* In the CSS header has specified all elements of the default padding, external padding, border, etc. are 0 * *

#list {width:300px;}

#list li {width:100px; float:left;}

OK, see here, I believe you have to say, this is not too easy? Well, that's it, so let's go down.

If we require a 10 pixel interval between two li. What do we do? That means we need three Li plus two 10 pixel intervals, and require no change in the HTML code. You know, if we were to specify that the right outer padding of Li (and also the padding) would be three 10 pixel intervals instead of two. What to do? Look at the following CSS code:

#list {Width:320px;overflow:hidden;}

#list ul {width:330px;}

#list li {width:100px; float:left;margin:0 10px 0 0;}

Here, we control the width of the div is 320px, but in the control of the UL control of the 330px. So it won't open? Because we use the Overflow:hidden control, this control allows anything in the list div to be automatically hidden in excess of the width and height of his rules. And we control the width of the UL 330px is to be able to have enough width to accommodate Li and spacing.

Through this curve approach, we have cleverly completed the desired effect. In fact, the hidden overflow has a lot of magical uses, the author only to stimulate. Original: http://www.difangla.cn/XTML-CSS/4018502323.html