根據li標籤的組合寬度動態設置ul的寬度

我試圖創建一個水平選項卡菜單。我如何獲得所有li標籤的組合寬度並使用jquery將寬度分配給父UL？根據li標籤的組合寬度動態設置ul的寬度

在此先感謝！

2009-11-13 cadenage

出於好奇，爲什麼你不得不指定寬度呢？你應該能夠將你的LI的左邊浮在css中，然後用方便的< br/>清除它們。

<style type="text/css"> 
ul li { float: left; } 
br { clear: both; } 
</style> 

<ul> 
<li>Some</li> 
<li>randomly long</li> 
<li>or</li> 
<li>short</li> 
<li>LI's</li> 
</ul><br />

來源

2009-11-13 15:43:07

我想指定ul的寬度，因爲我有它的背景，我不希望它拉伸到我的容器的寬度。 – cadenage 2009-11-13 15:57:45

是啊我的問題是不是與浮動李的 – cadenage 2009-11-13 15:59:12

你有任何地方查看頁面？ – 2009-11-13 16:03:44

我同意Akoi，我認爲這可能是一個CSS。類似於

<style type="text/css"> 
ul { overflow: auto; background: #efefef; padding: 0; margin: 0; display: block; float: left; clear: both; } 
ul li { float: left; display: block; padding: 5px 10px; } 
</style> 

<ul> 
    <li>Menu item</li> 
    <li>Menu item</li> 
    <li>Menu item</li> 
    <li>Menu item</li> 
    <li>Menu item</li> 
    <li>Menu item</li> 
</ul>

來源

2009-11-13 16:14:07 Wil

ul向左浮動的事實意味着它只會水平延伸到其內容的寬度。溢出意味着它將水平和垂直拉伸，因此您不必設置高度。清除確保沒有任何東西會嘗試並坐在旁邊。你試過這段代碼嗎？ – Wil 2009-11-13 17:29:07

這是我的html。正如你所看到的，我只是試圖確保我的ul不會擴展到容器的寬度。

<html> 
<head> 
<title>Untitled Document</title> 
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
$("#tabs").tabs(); 
    }); 
    </script> 
<style> 
#container {width:960px;} 
#tabs {background:url(../images/tab_lft.gif) no-repeat 0 0; margin:0 10px; width:940px;} 
#tabs ul {background:#ccc url(../images/tab_rgt.gif) no-repeat right 0; height:24px; list-style:none; margin:0 0 0 6px; padding:6px 6px 0 0; } 
#tabs ul li {display:inline; float:left; line-height:24px;} 
#tabs ul li a:link, #tabs ul li a:visited {display:block; color:#565656; padding:0 10px; text-decoration:none; } 
#tabs ul li a:hover {background-color:#fff;} 
.clear {clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;} 
</style> 
</head> 
<body> 
<div id="container"> 
<div id="tabs"> 
    <ul> 
     <li><a href="tab1.html">Tab 1</a></li> 
     <li><a href="tab2.html">Tab 2</a></li> 
     <li><a href="tab3.html">Tab 3</a></li> 
    </ul> 
    <div class="clear"></div> 
</div> 

</div> 
</body> 
</html>

來源

2009-11-13 16:32:38 cadenage

根據li標籤的組合寬度動態設置ul的寬度

回答

相關問題