ansaurus

Question

dynamically set width of ul based on combined width of li tags

Answer 1

+1 A:

Out of curiosity, why are you having to specify the width anyways? You should just be able to float your LI's left in css, then clear them with a handy <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 Meexx 2009-11-13 15:43:07

i want to specify the width of the ul because i have a background on it and I don't want it to stretch to the width of my container.

cadenage 2009-11-13 15:57:45

yea my problem isn't with floating the li's

cadenage 2009-11-13 15:59:12

Do you have the page up anywhere to look at?

Akoi Meexx 2009-11-13 16:03:44

Answer 2

+2 A:

I'd agree with Akoi, I think this is probably one for CSS. Something like

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

Wil 2009-11-13 16:14:07

The fact that the ul is floated left means it will only extend horizontally to the width of it's contents.The overflow means it will stretch horizontally AND vertically so you don't have to set the height.The clear ensures nothing will try and sit next to it. Have you tried this code?

Wil 2009-11-13 17:29:07

Answer 3

A:

here's my html. as you can see, I'm only trying to ensure that my ul doesn't extend to the width of the container.

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

cadenage 2009-11-13 16:32:38

ansaurus

tags:

views:

answers:

dynamically set width of ul based on combined width of li tags

related questions