CSS：具有固定 <li> 宽度的水平、逗号分隔列表答案

【问题标题】：CSS: Horizontal, comma-separated list with fixed <li> widthCSS：具有固定 <li> 宽度的水平、逗号分隔列表
【发布时间】：2010-05-25 06:20:48
【问题描述】：

我想实现如下结构：

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

我有一个固定长度的<div>，在其中有一个水平的、以逗号分隔的链接列表 (ul)。
<li> 元素应具有固定宽度，因此如果链接超过固定长度，将显示省略号（使用 text-overflow 属性）。

我知道两种使列表水平排列的方法。一种是使用display: inline，另一种是使用float 属性。

使用第一种方法，我无法设置固定宽度，因为 CSS 规范不允许设置内联元素的宽度。
第二种方法会造成混乱：O
在<a> 元素上设置float，旨在限制那里的宽度，将其与逗号分隔。

不存在浏览器兼容性问题，我只需要支持 WebKit。

我包含了我尝试使用的代码：

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

谢谢。

【问题讨论】：

标签： css inline fixed-width horizontallist

【解决方案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' */
}
...

我的 2 美分

【讨论】：

哪个位生成逗号？
原帖中的ul li:after-部分。我只是重写了ul li和ul li a，其余的都一样。
在我的项目中使用了这个。感谢您教我有关 inline-block 的知识。

【解决方案2】：

将 li 元素的 'display' 属性设置为 'inline-block'。它与 WebKit 浏览器完全兼容。你不能给一个内联级元素尺寸，但你可以给一个块级元素。 inline-block 在您的情况下是一种快乐的媒介 - 它允许尺寸但显示内联。我认为它也是浮动和清除的更好选择。

【讨论】：

噢！比我快一分钟。 :)

【解决方案3】：

您是否尝试过display: inline-block 并设置了固定宽度？这允许您拥有可以调整大小的内联元素，就像 img 标记一样。

【讨论】：

【解决方案4】：

我之前尝试过display: inline-block，但如果链接中有空格，则单词会换行。
进一步随机搜索发现white-space: nowrap; 解决了这个问题，因此最终的解决方案是将这些属性添加到<li> 元素中：

ul li {
 width: 30px;
 display: inline-block;
 white-space: nowrap;
}

感谢您的回复。

编辑：实际上，逗号不显示。
删除overflow 和text-overflow 属性会发现<li> 元素重叠，并且逗号与文本的其余部分一起隐藏。

【讨论】：

我开始听起来像是一张破唱片，但是对于inline-block 的跨浏览器支持，您需要以下样式：display: -moz-inline-box（Firefox inline-block，但 display: inline 加上 hasLayout（可以使用 zoom: 1 没有副作用）与那些浏览器中的inline-block 相同。（您可以使用*display: inline; *zoom: 1; 来隔离这些浏览器，也可以使用条件 cmets 包含这些样式。）
作者说“没有浏览器兼容性问题，我只需要支持WebKit。”
@0scar，啊，我没注意到。我仍然会为这篇文章上发生的其他人留下评论；它经常被错过，以至于我发现自己可能每个月都会在 SO 上记两次。