Question

我想实现以下结构：

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

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

我知道两种方法可以使列表水平。一个使用display: inline，另一个使用float属性。

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

没有浏览器兼容性问题，我只需要支持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>

谢谢。

Answer 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¢

Answer 2

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

Answer 3

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

Answer 4

之前我曾尝试display: inline-block，但如果链接中有空格，则会突破新行。
进一步的随机搜索显示white-space: nowrap;修复了该问题，因此最终的解决方案是将这些属性添加到<li>元素：

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

感谢您的回复。

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

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

4 个答案: