根据 li 标签的组合宽度动态设置 ul 的宽度答案

【问题标题】：dynamically set width of ul based on combined width of li tags根据 li 标签的组合宽度动态设置 ul 的宽度
【发布时间】：2009-11-13 15:37:50
【问题描述】：

我正在尝试创建一个水平选项卡菜单。如何获取所有 li 标签的组合宽度并使用 jquery 将宽度分配给父 UL？

提前致谢！

【问题讨论】：

标签： jquery css jquery-ui jquery-ui-tabs

【解决方案1】：

我同意 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>

【讨论】：

ul 向左浮动的事实意味着它只会水平延伸到其内容的宽度。溢出意味着它将水平和垂直拉伸，因此您不必设置高度。清除确保没有任何东西会尝试坐在它旁边。你试过这个代码吗？

【解决方案2】：

出于好奇，为什么还要指定宽度？您应该能够在 CSS 中浮动您的 LI 左侧，然后使用方便的
清除它们。

<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 />

【讨论】：

我想指定 ul 的宽度，因为我有背景，我不希望它拉伸到容器的宽度。
是的，我的问题不在于浮动 li 的
你有页面可以查看吗？

【解决方案3】：

这是我的 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>

【讨论】：