Question

我有以下HTML，我需要LI元素垂直显示在21像素高UL区域的中间。这是我的HTML ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style type="text/css">
        .MenuBar
        {
            padding: 0px;
            border: 1px solid #036;
            height: 21px;
            font-size: 8pt;
        }
        .MenuBar li
        {
            display: inline;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <ul class="MenuBar">
        <li>Link 1</li><li>Link 2</li><li>Link 3</li></ul>
</body>
</html>

如何改变上述HTML以达到这种效果？

Answer 1

我认为您正在尝试制作水平而不是垂直列表，因为您要将LI元素显示类型设置为“内联”。所以试试这个：

<style type="text/css">
    .MenuBar
    {
        padding: 0px;
        border: 1px solid #036;
        height: 21px;
        font-size: 8pt;
    }
    .MenuBar li
    {
        display: inline;
        line-height: 21px;
        padding-left: 20px;
    }
</style>

Answer 2

这就是你要追求的吗？

    .MenuBar li
    {
        display: inline;
        padding-left: 20px;
        line-height: 21px;
    }

像Sarfraz一样，我不确定我完全理解这个问题。

Answer 3

将line-height:21px添加到.MenuBar

Answer 4

无法准确获取您想要的内容，但如果您想使列表垂直显示，请尝试以下操作：

    .MenuBar li
    {
        display: block;
        padding-left: 20px;
    }

只需将display属性更改为block，而不是inline。这也是默认行为。

Answer 5

最优雅，最可靠的方法是在<li />元素中插入辅助内联元素作为第一个子元素，其高度应设置为100％（父元素的高度为{{1} }}），并将其vertical-align设置为middle。要实现这一点，你可以放一个<li />，但最方便的方法是使用li：after伪类。

<span />

通过这种方式，您不需要对高度值（21px或其他）进行硬编码。参考： CSS vertical alignment text inside li

CSS在中间垂直对齐LI

5 个答案: