In the Div ul do not know the width of the case, let Li and Content center, in the site, the list of pages with the UL list, but UL is not to define the width of the page should be divided with the content changes, so that the page will always show in the middle part, You can no longer use the usual margin or text-align these center properties, the following is the case can let ul no width, it is possible to center the code.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>ul width Adaptive let Li center </title>
<style type= "Text/css" >
<!--
ul,li{padding:0px;margin:0px; list-style:none;}
. Syx{width:765px;height:50px;background: #F2F2F2; margin:0 Auto;text-align:center;overflow:hidden;}
. Syx ul{float:left;position:relative;left:50%;}
. Syx ul li{float:left;position:relative;right:50%;margin:3px;display:block;border:1px #BCBCB0 solid;background:# 149d0d;line-height:29px;}
. Syx ul Li A{display:block;padding:5px;color: #000000; text-decoration:none;}
. syx Li a:hover{border:1px solid #333;d isplay:block;width:86px;}
-
</style>
<body>
<div class= "Syx" >
<ul>
<li><a href= "http://shenyongxiang.com/" > Shin Yongxiang </a></li>
<li><a href= "http://shenyongxiang.com/" > Shin Yongxiang </a></li>
<li><a href= "http://shenyongxiang.com/" > Shin Yongxiang </a></li>
<li><a href= "http://shenyongxiang.com/" > Shin Yongxiang </a></li>
<li><a href= "http://shenyongxiang.com/" > Shin Yongxiang </a></li>
<li><a href= "http://shenyongxiang.com/" > Shin Yongxiang </a></li>
</ul>
</div>
</body>
DIVCSS's ul width adaptive let Li Center content is more suitable with the pagination number, navigation columns, etc., can let the content increase without revision of the style of the page.
Transferred from: http://shenyongxiang.com/divcss/148.html
If you do not float Li, so that Li's display for Inline-block,ul set Text-align:center, can also achieve the same effect, the code is as follows: Scss
header{
margin-top:4%;
Nav {
UL {
Text-align:center;
Li {
Display:inline-block;
padding:3.5%;
font-size:18px;
Font-weight:bold;
margin:0 1px;
}
UL width Adaptive let Li Center
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
