hel*_*llo 1 css inline horizontallist fixed-width
我想实现以下结构:
[gfhtfg..., kgjrfg..., asd, mrhgf, ]
^-------^ ^-------^ ^-------^ ^-------^
X X X X
(X = a fixed length)
我<div>有一个固定长度,并在其中有一个水平,逗号分隔ul的链接列表().
该<li>元件应具有一个固定的宽度,并且因此,如果链接超过固定长度省略号将被显示(使用text-overflow性).
我知道两种方法可以使列表水平.一个是使用display: inline,另一个是使用该float属性.
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>
谢谢.
...
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¢