我有一个棘手的问题要处理。场景如下:
我有一个包含列表项的无序列表。这些是垂直显示的，具有交替颜色的背景，所有这些都具有相同的宽度(由几个 parent 向上的固定宽度 div 限制)。在某些元素上，有一个列表元素指示器 ( list-style-type: square; list-style-position: inside; )，但在大多数元素上没有。在这些列表项中，有三个 float 的 <div>。 s，所有这些都只包含文本。一个需要在列表项中向左对齐，另外两个向右对齐。第一个和右对齐 <div>需要有一个固定的宽度，以防止包含的文本溢出到下一行，或超出列表项的边界。另外两个也必须具有固定宽度，因为除了特定于字体的浏览器渲染差异之外，它们的内容根本不会改变大小。
这是一个简单的文本示例:
--------------------------------------
| • <Some Text> <text2><text3>|
| <Some more text>...<text2><text3>|
| <other text> <text2><text3>|
--------------------------------------
第一项中的文本具有此 CSS:text-overflow: ellipsis; overflow: hidden; white-space: nowrap;很好地控制溢出。要查看全部内容，我有一些不错的 jQuery 黑魔法来让它滚动，我已经在这个上下文之外测试和证明了这一点。
我目前的问题是，在所有主流浏览器中，所有元素的 float 导致每个列表项都没有高度，除了带有列表指示符 ( list-style-type ) 的列表项。将 clearfix div 添加到列表项内容的末尾会导致内容以全宽显示在列表项指示符下方的一行中:
--------------------------------------
| • |
| <Some Text> <text2><text3> |
--------------------------------------
如果第一个文本不必为其设置固定宽度(我的布局已经这样工作)，一切都会非常简单，但它必须如此。
为了您的享受，这里是一个有效的 HTML 示例，正好说明了我的问题:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
<head>
<title>HTML List Problem</title>
<style type="text/css">
#container { width: 420px; }
#container ul {
list-style-type: none;
margin: 0;
padding: 0 20px;
background: green;
}
.item { padding: 5px 0 4px 20px; }
.item-current {
list-style-type: square;
list-style-position: inside;
}
.item-even { background: yellow; }
.item-odd { background: orange; }
.text1 {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.text2, .text3 {
float: right;
width: 30px;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li class="item item-current item-even">
<div class="text1 item-current">
Some Text
</div>
<div class="text2">
text2
</div>
<div class="text3">
text3
</div>
</li>
<li class="item item-odd">
<div class="text1">
Some Text
</div>
<div class="text2">
text2
</div>
<div class="text3">
text3
</div>
</li>
<li class="item item-even">
<div class="text1">
Some Text
</div>
<div class="text2">
text2
</div>
<div class="text3">
text3
</div>
</li>
<li class="item item-odd">
<div class="text1">
Some Text
</div>
<div class="text2">
text2
</div>
<div class="text3">
text3
</div>
</li>
</ul>
</div>
</body>
</html>
最佳答案
这个怎么样？
<title>HTML List Problem</title>
<style type="text/css">
#container { width: 420px; }
#container ul {
list-style-type: none;
margin: 0;
padding: 0 20px;
background: green;
}
.item {
padding: 5px 0 4px 20px;
list-style-type: square;
color: yellow;
}
.item-current {
list-style-type: square;
}
.item-even { background: yellow; }
.item-odd { background: orange; }
.text1 {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.text2, .text3 {
float: right;
width: 30px;
}
</style>
-
一些文字
文字2
文字3
一些文字
文字2
文字3
一些文字
文字2
文字3
一些文字
文字2
文字3
所有我改变的是:
删除了列表样式位置 添加了 list-style-type: square 和背景颜色(隐藏元素符号)您可能需要一些额外的标记来支持备用行颜色。这是不是太过分了？
关于HTML — <li> 中的多个 float block 级元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6433453/