Question

所以我试图在css中创建一个导航栏但是当我使<a>的字体大小变大时，所有其他的变得混乱而不是垂直居中。我使用了inspect元素，发现带有navbar-right类的<a>标签的高度与它们的<ul>父级不同，因此不会居中。

codepen：http://codepen.io/anon/pen/aBWgJq

任何解决方案，而无需使用bootstrap / javascript？`

HTML：

    <ul class="nav" role="navigation">
       <li class="nav-left"><a href="#" class="brand"><span class="ot">T</span>est</a></li>
        <li class="nav-right"><a href="#" id="one" role="button">123</a></li>
        <li class="nav-right"><a href="#" id="two" role="link">456</a></li>
        <li class="nav-right"><a href="#" id="three" role="link">789</a></li>
    </ul>

CSS：

.nav
{
    list-style-type: none;
    overflow: hidden;
    background-color: rgb(238, 238, 238);
}

.nav li a
{
    display: block;
    padding: 16px;
}

.nav .nav-left
{
    float: left;
    font-size: 35px;
}

.nav .nav-right
{
    float: right;
    text-transform: uppercase;
    font-size 20px;
}

.ot
{
    color: rgb(255, 165, 0);
}

Answer 1

如果您想在<a>

内的所有<li>使用相同的字体

以这种方式更改字体大小

.nav li a
{
    display: block;
    padding: 16px;
  font-size: 35px;
}

根据您的代码解释

Answer 2

您的导航右侧元素与导航左侧元素的高度不同，因为它们的大小不同。你的不同字体大小决定了taht。你最好的办法是在导航右边的元素上添加一个填充顶部规则，使其向下倾斜一点，然后将它们与左侧对齐。

Answer 3

您可以这样做：


     .nav
     {
        list-style-type: none;
        overflow: hidden;
        background-color: rgb(238, 238, 238);
     }
    .nav li.nav-left  a
    {
        padding: 16px;
        float: left;
        font-size: 35px;
    }

     .nav li.nav-right a{
        float: right;
        text-transform: uppercase;
        font-size: 20px;
        padding:24px;
     }
     .ot
     {
        color: rgb(255, 165, 0);
     }

Answer 4

将line-height: 35px;添加到.nav-right规则。

强制<li>使其父级的高度为<ul>

4 个答案: