UL width Adaptive let Li Center

Source: Internet
Author: User

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

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.