HTML —
|
我有一个棘手的问题要处理。这是方案:
我有一个包含列表项的无序列表。这些是垂直显示的,具有交替颜色的背景,所有背景都具有相同的宽度(以固定宽度的div为界,并有几个父级向上)。在某些项目上有一个列表项目指示符(
list-style-type: square; list-style-position: inside;
),但在大多数项目上没有。在这些列表项中,有三个浮动的<div>
,它们全部仅包含文本。在列表项中,一个需要左对齐,另外两个需要右对齐。第一个和右对齐的“ 1”必须具有固定的宽度,以防止所包含的文本流到下一行或延伸超出列表项的边界。另外两个也必须具有固定的宽度,因为它们的内容除了特定于字体的浏览器呈现差异之外,根本不会改变大小。
这是一个简单的文本示例:
--------------------------------------
| • <Some Text> <text2><text3>|
| <Some more text>...<text2><text3>|
| <other text> <text2><text3>|
--------------------------------------
第一项中的文本具有以下CSS:text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
,可以很好地控制溢出。要查看全部内容,我有一些不错的jQuery黑魔法可以使它滚动,而我已经在此上下文之外进行了测试和证明。
我当前的问题是,在所有主流浏览器中,所有元素的浮动都会导致每个列表项都没有高度,除了带有列表指示符(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>
没有找到相关结果
已邀请:
2 个回复
佬棠
一些文字 文字2 文字3 一些文字 文字2 文字3 一些文字 文字2 文字3 一些文字 文字2 文字3 我更改的只是: 删除列表样式位置 添加了list-style-type:正方形和背景色(以隐藏项目符号)您可能需要一些其他标记来支持备用行颜色。这太多了吗?
奥李