UL content self-adapting center

In the development process, think of a problem, usually the block-level elements are defined when the center is a width and then simply through the margin:0 auto, implementation, but if the content is increased, it is not necessary to modify the width of each time. I feel the need to think about a self-adapting content and centering the scheme.

So, I wrote a demo to think about the problem, and simply check my thoughts. The HTML code is as follows:

1 <Divclass= ' container '>2     <ulclass= "Clearfix">3         <Li><ahref= "javascript:void (0);"></a></Li>4         <Li><ahref= "javascript:void (0);"></a></Li>5         <Li><ahref= "javascript:void (0);"></a></Li>6     </ul>7 </Div>

It's a very simple structure, and it's easy for everyone to understand my approach.

The CSS code is as follows:

1 . Clearfix:after{2 content:"';3 Visibility:Hidden;4 font-size:0;5 Height:0;6 Display:Block;7 Clear:both;8}9 Ten . Container{ One width:100%; A text-align:Center; -} -   the ul{ - Display:Inline-block; -} -   + Li{ - float: Left; + width:20px; A Height:20px; at margin:0 20px; - -webkit-border-radius:10px; - -moz-border-radius:10px; - -o-border-radius:10px; - Border-radius:10px; - cursor:Pointer; in} -   to a{ + Display:Block; - Background-color:#000; the}

The effect of the implementation

The idea is to let ul define the Display:inline-block attribute to make it into inline block-level elements.

When UL becomes an inline block-level element, it has the properties of the row-level element.

So, here comes the point.

Only the parent element of the UL is required. Container defines a text-align:center;

The effect can be clearly seen.

The more important point is that the increase ordecrease of LI in UL does not offset its position .

Perhaps this technique is very common, but I think this is a process of thinking, if there are deficiencies, please point out!

UL content self-adapting center