Я пытаюсь создать горизонтальное меню вкладок. как я могу получить объединенную ширину всех тегов li и назначить ширину родительскому UL с помощью jquery?динамически заданная ширина ul на основе комбинированной ширины тегов 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 />
Я согласен с 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 перемещается влево, означает, что он будет только расширяться по горизонтали до ширины его содержимого. Переполнение означает, что он будет растягиваться горизонтально и вертикально, поэтому вам не нужно устанавливать высоту. Чистота гарантирует, что ничего не попробует и не сядет рядом с ним. Вы пробовали этот код? – Wil
вот мой 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>
Я хочу указать ширину ul, потому что у меня есть фон, и я не хочу, чтобы он растягивался до ширины моего контейнера. – cadenage
Да, моя проблема не в том, чтобы плавать ли. – cadenage
У вас есть страница, где бы вы ни находились? –