CSS: Horizontal, comma-separated list with fixed <li> width

css inline fixed-width horizontallist

12,733

Solution 1

...
ul li a {
 text-decoration: none; color: #666; 
 display: inline-block; 
 max-width: 50px; /* 'X' minus gutter */
 white-space: nowrap; 
 text-overflow: ellipsis; 
 overflow:hidden;
}
ul li {
 margin: 0px;
 padding: 0px;
 list-style: none;
 white-space: nowrap;
 display: inline-block;
 width: 60px; /* 'X' */
}
...

My 2¢

Solution 2

Set the 'display' attribute of the li elements to 'inline-block'. It is fully compatible with WebKit browsers. You cannot give an inline level element dimensions, but you can to a block level element. inline-block is a happy medium in your case - it allows dimensions but displays inline. It is a better alternative to floats and clears too I think.

Solution 3

Have you tried display: inline-block and set a fixed width? This allows you to have inline elements that can be sized, just like an img tag.

12,733

Author by

hello

Updated on June 27, 2022

Comments

hello about 2 years

I would like to achieve the following structure:

[gfhtfg..., kgjrfg..., asd,      mrhgf,   ]  
 ^-------^  ^-------^  ^-------^ ^-------^  
     X          X          X         X
(X = a fixed length)

I've got a <div> with a fixed length, and inside it an horizontal, comma-separated list (ul) of links.
The <li> elements should have a fixed width, and so if the links exceed a fixed length an ellipsis will be shown (using the text-overflow property).

I know two ways to make a list horizontal. One is using display: inline and the other using the float property.

With the first approach, I can't set a fixed width because the CSS specification doesn't allow setting the width of inline elements.
The second approach creates a mess :O
Setting float on the <a> element, intending to limit the width there, separates it from the commas.

There are no browser-compatibility issues, I only have to support WebKit.

I included the code I attempted to work with:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>a title</title>
 <style>
  body { font-family: arial; font-size: 10pt; }

  div {
   height: 30px;
   width: 300px;
   background: #eee;
   border: 1px solid #ccc;
   text-align: center;
  }

  ul { margin: 0px; padding: 0px; }
  ul li:after { content: ","; }
  ul li:last-child:after { content: ""; }
  ul li a { text-decoration: none; color: #666; }

  ul li {
   margin: 0px;
   padding: 0px;
   list-style: none;
   overflow: hidden;
   text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
   /* Inline elements can't have a width (and they shouldn't according to the specification */
   display: inline;
   width: 30px;
  }
 </style>
</head>
<body>

<div>
 <ul>
  <li><a href="#">a certain link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">once again</a></li>
  <li><a href="#">another one</a></li>
 </ul>
</div>

</body>
</html>

Thank you.

JYelton about 14 years

Doh! Beat me to it by a minute. :)
eyelidlessness about 14 years

I am starting to sound like a broken record, but for cross-browser support with inline-block, you'll want the following styles: display: -moz-inline-box (Firefox < 3; it's not identical but it's close for most uses) and for elements which are block-level by default IE 6 and IE 7 don't support inline-block, but display: inline plus hasLayout (which can be had with zoom: 1 without side-effect) is identical to inline-block in those browsers. (You can use *display: inline; *zoom: 1; to isolate those browsers, or you can include those styles with conditional comments.)
0scar about 14 years

Author said "There are no browser-compatibility issues, I only have to support WebKit."
eyelidlessness about 14 years

@0scar, ah I didn't notice that. Still I'll leave the comment for others who happen on this post; it's missed often enough that I find myself making note of it on SO probably twice a month.
jmtd over 13 years

Which bit generates the commas?
0scar over 13 years

The ul li:after-part in the original post. I just rewrote the ul li and ul li a, the rest are the same.
Phil almost 13 years

Used this in my project. Thanks for teaching me about inline-block.