homepage Welcome to WebmasterWorld Guest from 54.145.183.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Achieving equal space between horizontal list items of varying width
Combining min-width and max-width
SilverLining

5+ Year Member



 
Msg#: 4578537 posted 11:39 am on May 28, 2013 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4578537 posted 7:08 pm on May 28, 2013 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4578537 posted 7:28 pm on May 28, 2013 (gmt 0)

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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4578537 posted 11:46 pm on May 28, 2013 (gmt 0)

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

5+ Year Member



 
Msg#: 4578537 posted 6:46 am on May 29, 2013 (gmt 0)

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

5+ Year Member



 
Msg#: 4578537 posted 1:47 pm on May 29, 2013 (gmt 0)

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

5+ Year Member



 
Msg#: 4578537 posted 6:15 am on Jun 6, 2013 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved