Yesterday in the study list, try to do the case, there is a list can not be centered display problem, the code is as follows:
1 <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">2 <HTMLxmlns= "http://www.w3.org/1999/xhtml">3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />5 <title>List</title>6 <styletype= "Text/css">7 </style>8 </Head>9 <Body>Ten <Divclass= "Container"> <!--Define a box container with two boxes in the box: Left and right - One <Divclass= "Left"> A <ul> - <Li><ahref="#">Home</a></Li> - <Li><ahref="#">My blog</a></Li> the <Li><ahref="#">My friends</a></Li> - <Li><ahref="#">Entertainment world</a></Li> - <Li><ahref="#">Friendship Link</a></Li> - </ul> + </Div> - <Divclass= "Right"> + <P>Body Content</P> A </Div> at </Div> - </Body> - </HTML>
The corresponding CSS code is as follows:
1 Body{2 margin:0px;3 padding:0px;4 text-align:Center;5}6 . Container{7 width:600px;8 Height:200px;9 background:#CCC;Ten Border:1px solid #90F; One} A . Left{ - width:200px; - Height:200px; the float: Left; - Border-right:1px solid #90F; -} - . Right{ + width:399px; - Height:200px; + float: Right; A}
The results of the implementation are as follows:
Through, it can be seen that although I used text-align:center, but left in the list is obviously not centered, now I set the UL to List-style-type:none; The results are shown as:
Obviously, the position of the list content is not changed, but the front of the small origin is missing, then we add a border to the list to see what is going on,
The CSS code is as follows:
1 . Left UL {2 border:1px solid #900; 3 }4. Left ul Li{5 border:1px solid #390; 6 }
The results of the implementation are as follows:
Obviously, the front of the small dot occupy a certain width, then we should delete the width of the small dot, to achieve the center of the list content, here to use the display:inline;
The complete code is as follows:
1 Body{2 margin:0px;3 padding:0px;4 text-align:Center;5}6 . Container{7 width:600px;8 Height:200px;9 background:#CCC;Ten Border:1px solid #90F; One} A . Left{ - width:200px; - Height:200px; the float: Left; - Border-right:1px solid #90F; -} - . Right{ + width:399px; - Height:200px; + float: Right; A} at . Left UL{ - List-style-type:None; - Display:inline;/*Implement list Content Center display*/ -}
The implementation results are as follows:
Getting Started with web design--list formatting