浮動后的li元素居中實現方法

2024-07-11 08:26:32

字體：大中小

來源：轉載

供稿：網友

比如有如下所示HTMl代碼：

復制代碼

代碼如下:
<div class="demo">
<ul>
<li><a href="#">我居中了</a></li>
<li><a href="#">我居中了</a></li>
<li><a href="#">我居中了</a></li>
<li><a href="#">我居中了</a></li>
<li><a href="#">我居中了</a></li>
</ul>
</div>

當做的是水平導航條時，有以下三種辦法：
1、對ul使用"text-align: center;"的辦法，然后把li轉換為inline元素，設置內外邊距可以得到效果，代碼如下：

復制代碼

代碼如下:
* {
margin: 0;
padding: 0;
}
body {
background: #000;
color: #FFF;
font: 12px/1.5 Tahoma,Arial;
}
.demo {
border: 1px solid #CCC;
line-height: 27px;/* 如果有上下邊框，必須設置行高使上下邊框顯示出來，行高無論是繼承的還是給定的，計算的結果必須不小于27px，這里27=15+5+5+1+1，至于字體12px大小，為什么FF查看盒子模型中高為15px，我也不懂，請高人指點迷津 */
margin: 5px auto;
overflow: hidden;
width: 1430px; /* 給包含ul的盒子設置寬度為瀏覽器窗口的物理寬度（我顯示器19寸，差不多1430px寬），發現li的內容仍然居中，說明無論是是否定寬,li轉換成inline元素均可以使li內容居中 */
}
.demo ul {
text-align: center;
margin: 2px 0;/* 讓外邊框顯示出來 */
}
.demo ul li {
border: 1px solid #555;
display: inline;
padding: 5px;
list-style: none;
margin: 10px;/* 轉換成inline元素之后，發現上下外邊距失效（其實是內陷，可以使用行高調整），這個務必了解 */
}
a {
color: #FFF;
text-decoration: none;
}
a:link, a:visited {}
a:hover {
color: #F60;
}

這里說明一下，為了更直觀的展現是否居中，我給.demo這個盒子添加了邊框，給每個<li>也添加了邊框，實際操作時可能不需要邊框。
這種做法的缺點是上下外邊距失效（其實是內陷，可以使用行高調整），必須定義盒子的行高使得上下邊框顯示出來；而且li轉換成inline元素，不能夠再定義寬高。
2、對li使用浮動（通常是"float: left"）的辦法。但是會發現列表項無法居中顯示，它們總是沿浮動的方向對齊。為了解決居中問題，必須對包含ul的父元素使用padding或對ul使用margin實現：

復制代碼

代碼如下:
.demo ul {
float: left;
text-align: center;
margin-left: 500px;/* 用margin或者對.demo用padding實現居中，非常的不靈活，如果li個數增加，邊距必須再調整。目前我還沒有找到能替代的方法，望大蝦們指點^_^ */
}
.demo ul li {
border: 1px solid #555;
float: left;
padding: 5px;
list-style: none;
margin: 10px;
}

上一篇：讓IE6、IE7、IE8支持CSS3的腳本

下一篇：IE6 Bug overflow:hidden失效

發表評論

共有條評論