1. Home
  2. Forums Index
  3. Browser Side / CSS 11:23 am May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Achieving equal space between horizontal list items of varying width

Combining min-width and max-width

         

SilverLining

11:39 am on May 28, 2013 (gmt 0)

10+ Year Member



What is the best way to achieve equal space between horizontal list items of varying width, using the structure below.

I have set both min-width and max-width. When a word spans two lines and the max-width kicks in, the "visual padding" is sometimes too much e.g. 
#penultimate
. The same happens when a word is narrower than the min-width. 

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
ul { display: table; list-style: none; width: 800px; }
li { margin-bottom: auto; margin-top: auto; text-align: center; text-transform: uppercase; }
li a { border: 1px solid #000; display: table-cell; float: left; max-width: 100px; min-width: 60px; padding: 0 10px; vertical-align: middle; word-wrap: break-word; }
</style>
</head>
<body>
<ul>
[pre] [/pre]<li><a href="#">blah</a></li>
 <li><a href="#">blah blah</a></li>
 <li><a href="#">fooooooooooooooo</a></li>
 <li><a href="#">foofoo foofoo</a></li>
 <li><a href="#" id="penultimate">foo foo foo </a></li>
 <li><a href="#">longwordfoo</a></li>
</ul>
</body>
</html>


Ideally one needs to strip all additional space in the 
a
tag and possibly place the padding on the 
li
.

Thanks

rainborick

7:08 pm on May 28, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Uniformity and flexibility rarely mix easily in CSS. You're generally going to have to compromise a little both ways. But I took a stab at it: 

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
ul { list-style: none; width: 800px; }
li { float:left; margin-left:2%; margin-bottom: auto; margin-top: auto; max-width:14%; text-align: center; text-transform: uppercase; word-wrap: break-word; border: 1px solid #000; }
li a { padding:0 10px 6px 10px; }
</style>
</head>
<body>
<ul>
<li><a href="#">blah</a></li>
<li><a href="#">blah blah</a></li>
<li><a href="#">fooooooooooooooo</a></li>
<li><a href="#">foofoo foofoo</a></li>
<li><a href="#" id="penultimate">foo foo foo </a></li>
<li><a href="#">longwordfoo</a></li>
</ul>
</body>
</html>

rainborick

7:28 pm on May 28, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



This might be better for tweaking/visualizing: 

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
ul { list-style: none; width:800px; margin:0; padding:0; background-color:#f0f0f0; }
li { float:left; margin-left:2%; max-width:14%; padding:0 10px 4px 10px;
   text-align:center; text-transform:uppercase; word-wrap:break-word; border:1px solid #000; }
ul:after, ul li:last-child:after {
 content:' ';
 display:block;
 height:0;
 clear:left;
}
</style>
</head>
<body>
<ul>
<li><a href="#">blah</a></li>
<li><a href="#">blah blah</a></li>
<li><a href="#">fooooooooooooooo</a></li>
<li><a href="#">foofoo foofoo</a></li>
<li><a href="#" id="penultimate">foo foo foo </a></li>
<li><a href="#">longwordfoo</a></li>
</ul>
<p>More</p>
</body>
</html>

lucy24

11:46 pm on May 28, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



li { margin-bottom: auto; margin-top: auto; text-align: center; text-transform: uppercase; }
li a { border: 1px solid #000; display: table-cell; float: left; max-width: 100px; min-width: 60px; padding: 0 10px; vertical-align: middle; word-wrap: break-word; }

I have trouble fitting "display: almost-anything" and "float" into the same sentence. In any case, shouldn't the "table-cell" aspect be attached to li, not to li a?

SilverLining

6:46 am on May 29, 2013 (gmt 0)

10+ Year Member



Thank you for your replies.

I added the border to make the space between words more noticeable. In the implementation there are no borders and there is little space to work with, so additional padding on the "li" elements is not really an option.

lucy24, display: table-cell is on the "a" tag to display the text vertically centre aligned.

Made some changes, but still have the same issue: 

<html>
<head>
<title>Example</title>
<style>
ul { 
display: table; 
list-style: none; 
width: 100%;
}
li { 
float: left;
margin-bottom: auto; 
margin-top: auto; 
text-align: center; 
}
li a { 
display: table-cell; 
font-size: 11px; 
height: 60px; 
max-width: 100px; 
min-width: 50px; 
padding: 0px 5px; 
text-decoration: none; 
text-transform: uppercase; 
vertical-align: middle; 
}
</style>
</head>
<body>
<ul>
<li><a href="#">blah</a></li>
<li><a href="#">blah blah</a></li>
<li><a href="#">foooooooo foooooooo</a></li>
<li><a href="#">foofoo foofoo</a></li>
<li><a href="#" id="penultimate">foo foo foo </a></li>
<li><a href="#">longwordfoo</a></li>
</ul>
</body>
</html>

SilverLining

1:47 pm on May 29, 2013 (gmt 0)

10+ Year Member



What I would like to achieve is something like this: 
|     | ---------- |       |           |
| --- | ---------- | ----- | ---- ---- |
|     |    ----    |       |           |

This is where CSS comes second to Tables.

I have also been experimenting with this, but still no progress: 

<script>
var width = $('ul li').each(function(){
var innerWidth = $(this).innerWidth();
$(this).css('width',innerWidth + 'px');
});
</script>

SilverLining

6:15 am on Jun 6, 2013 (gmt 0)

10+ Year Member



Hi again,

Just to clarify, I cannot use a table for the required purpose, as it's a navigation with second level dropdown menus.

Any solutions?

Thanks
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 11:23 am May 1, 2026