圍繞與浮動李

的UL我有圍繞與浮動李

<div id="container"> 
<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
</ul> 
</div>

用下面的CSS：

#container li { 
float:left; 
height:33px; 
line-height:30px; 
text-align:center; 
width:auto; 
} 

#container{ 
width:600px; 
}

但是我有在水平居中內#container上行難度。看起來我需要在ul上設置一個固定的寬度來使margin: 0 auto正常工作（IE需要text-align: center）。但是我不想爲ul設置固定的寬度，因爲li項目是動態的。

請指教。

來源

2010-10-12 cadaa

#container { 
    width: 600px; 
    text-align: center; 
} 

#container ul { 
    display: inline-block; 
} 

#container li { 
    float: left; 
    height: 33px; 
    line-height: 30px; 
}

來源

2010-10-12 09:41:26

謝謝你，但不inline-block的不工作在IE6（和IE7？）？ – cadaa 2010-10-12 09:49:34

你可以嘗試這個技巧，使其與IE（我無法驗證它是否工作，因爲我現在在Mac上）工作。將此添加到'#container ul'：'zoom：1; * display：inline;'這裏的基本原理在這裏解釋：http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ – 2010-10-12 10:30:48

這裏是一個很好的解決方案：http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/

<div id="menu-outer"> 
    <div class="table"> 
     <ul id="horizontal-list"> 
      <li><a href="#"><img src="images/list-item-1.gif" alt="list item 1" /></a></li> 
      <li><a href="#"><img src="images/list-item-2.gif" alt="list item 2" /></a></li> 
      <li><a href="#"><img src="images/list-item-3.gif" alt="list item 3" /></a></li> 
      <li><a href="#"><img src="images/list-item-4.gif" alt="list item 4" /></a></li> 
     </ul> 
    </div> 
</div>

現在看到很簡單的CSS，使之成爲現實：

#menu-outer { 
    height: 84px; 
    background: url(images/bar-bg.jpg) repeat-x; 
} 

.table { 
    display: table; /* Allow the centering to work */ 
    margin: 0 auto; 
} 

ul#horizontal-list { 
    min-width: 696px; 
    list-style: none; 
    padding-top: 20px; 
} 
ul#horizontal-list li { 
    display: inline; 
}

這是該表的div完成這項工作。有些日子，我想「無論什麼作品」。應該是CSS的口號。

在CSS

來源

2012-09-01 07:54:55 user1015687

：

ul { 
    float: left; 
}

jQuery的

centerize = function(){ 
     var parentWidth = $("ul").parent("#container").width(); 
     var width = $("ul").width(); 
     var dif = (parentWidth - width)/2; 
     $("ul").css("margin-left", dif + "px"); 

    }; 

    centerize();

可能ü需要爲每個瀏覽器縮放工作，所以加：

$(window).resize(function(){ 
    centerize(); 
});

來源

2013-06-17 18:54:18

圍繞與浮動李

回答

相關問題