Hi Is there way to spread out elements, (eg: <li>'s inside a <ul>), within a div?
EG: I have 3 elements, so they all get 30%
EG: I have 5 elements, so they get 20%
What is the best way to do this?
A:
Set an explicit width of the child elements and float them left or right accordingly.
Robert W
2009-10-18 20:53:25
A:
<html>
<style>
html, body {
padding: 0;
margin: 0;
}
ul.flatList {
list-style: none;
margin: 0;
padding: 0;
}
ul.flatList li {
width: 33.3%;
display: inline;
float: left;
text-align: center;
}
</style>
<body>
<ul class="flatList">
<li>left
<li>middle
<li>right
</ul>
</body>
</html>
Andrew Johnson
2009-10-18 21:11:19
i think he doesn't want to have the 33.3% hardcoded, but the width should dynamically adapt to the number of li elements.
ax
2009-10-19 15:50:25
thats what i want yeah, but not sure how
tarnfeld
2009-10-22 20:35:47
You could just use a bit of Javascript. Check the width of the container, and then set the widths of each div.
Andrew Johnson
2009-10-23 01:31:19