如何垂直对齐无序 html 列表中的项目？
Posted
技术标签:
【中文标题】如何垂直对齐无序 html 列表中的项目？【英文标题】：How can I vertically align items in an unordered html list? 【发布时间】：2010-12-30 13:28:02 【问题描述】：如何垂直对齐无序列表中的项目以在 IE6 和 7 中工作？
我不能只将 line-height 设置为全高，因为我有 1 行项目和 2 行项目。
我的代码是：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
ul
list-style: none;
border: 1px solid black;
height: 40px;
li
float: left;
margin-right: 10px;
height: 40px;
width: 46px;
a
</style>
</head>
<body>
<ul>
<li>
<a href="/">item1</a>
</li>
<li>
<a href="/">two lines</a>
</li>
</ul>
</body>
</html>
【问题讨论】：
你的意思是把</div> 放在那里吗？
li 中的
不应该存在。不确定这是否会导致您的问题。
【参考方案1】：
您不能将您的项目向左浮动并期望它们垂直排列....
删除
float: left;
来自 LI 风格...
【讨论】：
我需要所有项目的宽度相同。这就是为什么我使用 float 而不是 display:inline 的原因。有两个单词的项目应该占两行。没有浮动是否可以实现这一目标？ 是的，您可以...您需要删除所列项目的宽度限制，将其设置为简单的自动或 100%。 使用 width:auto 将使所有项目出现在一行中。我希望所有项目都具有相同的宽度。带有长文本的项目应跨越两行。 你首先需要去掉浮动：left;并替换为 clear: both;或显示：块； ...编辑...我误解了您到底在尝试什么...用“空格”分隔“单词”不能在 CSS 中动态完成，您需要使用 javascript 执行此操作。它将分解由“空格”分隔的单词并将它们分解为单独列出的项目。 我相信这里有点混乱，让我试着澄清一些事情。您正在尝试水平显示列出的项目，其中包含“两个或更多”单词的项目被垂直分解。使用左浮动和宽度是完全可能的，但不推荐，因为一旦你开始平铺这些列出的项目，IE 就不会很好地处理高度和浮动不均匀的列表......你可以 1) 将高度设置为大足以容纳您期望的单词量。 2）使用javascript相应地调整列表。【参考方案2】：如果我理解正确，您想使用浮动来收缩包装 li？
如果是这种情况你需要设置
li clear:left;
所以 lis 在彼此下方，而不是彼此相邻。如果你想让 li 收缩到内容，你也可以使用 inline-block。
此外，根据此目的，使用表格可能是合适的，具体取决于它的用途。
【讨论】：
【参考方案3】：对不起，如果这不是一个正确的答案，但它可能有助于澄清问题：
您为什么在列表项中使用浮点数而不是 display: inline？
【讨论】：
【参考方案4】：行的高度基本相同。所以没有办法在表格中有效地“合并单元格”。您应该将行高设置为“两行”项目的高度，然后使用 vertical-align 属性对齐它们。
【讨论】：
【参考方案5】：如果我理解正确，您需要一个水平显示的列表，其中每个项目都有设置的宽度和高度，但里面的文本是垂直居中的，并且可能有两行文本的项目。
如果您知道预渲染哪些项目将是两行，则可以应用一个 CSS 类，该类仅在那些具有单行的项目上设置 line-height: 40px;。通常情况并非如此，因此最好的方法是在列表呈现后使用 JS 动态更改行高。
查看这个 jsfiddle：http://jsfiddle.net/UEsAS/2/
本质上，更改您的 CSS 以不在 lis 上设置高度（如果它们是单行的，这将导致它们具有较低的高度，这就是您可以检测要更改哪些的方法）。然后运行以下命令（假设是 jQuery）：
$(function()
var maxHeight = 40;
$('li').each(function(i, el)
if ($(el).height() < maxHeight)
$(el).css('line-height', maxHeight + 'px');
);
);
【讨论】：
以上是关于如何垂直对齐无序 html 列表中的项目？的主要内容，如果未能解决你的问题，请参考以下文章
CSS：有没有办法在每个列表元素之前垂直对齐数字/项目符号？
CSS：有没有办法在每个列表元素之前垂直对齐数字/项目符号？