根据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的宽度

回答

相关问题