Question

由于代码很长，我已经小提琴了

<header>
    <div>
    </div>
</header>

FIDDLE：http://jsfiddle.net/9zWm9/34/

问：你能告诉我为什么我的列表项没有与标题框内的导航对齐。

要求：我希望我的列表项

正好位于标题框的中心，行高为3em。

提前致谢。

Answer 1

要水平对齐你的ul，你需要清除浮动，我已经使用带有class =“clear”的br元素完成了这个

.clear { clear:both; }

并垂直定位

我使用的位置：relative;最高：15％; 看看 fiddle

如果您不想在li元素上设置位置，这是另一种方法，这样您应该在ul元素上设置行高（而不是高度）。

查看此 fiddle

Answer 2

删除position:relative的{{1}}并添加.header-box。删除为overflow: hidden，.header-box和header nav指定的高度，并将填充添加到header nav ul

选中此fiddle

CSS更改

header nav ul

Answer 3

是的，问题是行高。一种可能的解决方案是将行高改为1：

font: 18px Verdana;
display: inline-block;
list-style-type: none;  
text-align:center;
line-height: 1;    
border: 1px solid red;

http://jsfiddle.net/9zWm9/35/

Answer 4

将以下课程设置为＆＃34; line-height：1em;＆＃34;

header nav ul li {
    border: 1px solid #FF0000;
    display: inline-block;
    font: 18px Verdana;
    list-style-type: none;
    text-align: center;
    line-height: 1em;
}

在标题和分区内定位

4 个答案: