1

我想实现以下结构：

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

谢谢你。

4

4 回答 4

9 
...
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 美分

于 2010-05-24T22:16:06.690 回答
3

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

于 2010-05-24T21:40:34.923 回答
1

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

于 2010-05-24T21:42:05.900 回答
0

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

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

谢谢您的回复。

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

于 2010-05-24T22:13:28.960 回答