列出ul项的行为很奇怪

时间:2018-11-22 19:15:59

标签: html css

我正在执行标题导航栏,并且向左浮动的项目比向右浮动的项目具有更大的字体大小。您可能会在代码运行中看到的问题是,字体大小较小的项目与字体大小较大的项目无法v对齐

我已经尝试了几个小时,但是没有运气,这可能是什么问题?

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header {
    background-color: black;
}

header ul {
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: black;
    overflow: hidden;
}

header ul li {
    display: inline-block;
    box-sizing: border-box;
}

header ul li a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 20px 20px;
    box-sizing: border-box;
}

#logo {
    float: left;
}

#logo a {
    font-size: 22px;
    display: block;
}

.navitem {
    float: right;
}
<header>
            <ul>
                <li id="logo"><a id="first" href="#">Relax</a></li>
                <li class="navitem"><a href="#">Testing</a></li>
                <li class="navitem"><a href="#">Testing</a></li>
                <li class="navitem"><a href="#">Testing</a></li>
                <li class="navitem"><a href="#">Testing</a></li>
                <li class="navitem"><a href="#">Testing</a></li>
            </ul>
        </header>

1 个答案:

答案 0 :(得分:0)

渲染这样的导航可能有点笨拙,因为您需要在HTML中以相反的顺序将它们导航,然后使用浮点数来反转它们的渲染方式(尝试使每个唯一的文本中的文字都明白我的意思) )。

更多语义,使用Flexbox将是:

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header {
    background-color: black;
}

header ul {
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: black;
    overflow: hidden;
    display: flex;
    align-items: center;
}

header ul li {
    box-sizing: border-box;
}

header ul li a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 20px 20px;
    box-sizing: border-box;
}

#logo {
    flex-grow: 1;
}

#logo a {
    font-size: 22px;
    display: block;
}
<header>
            <ul>
                <li id="logo"><a id="first" href="#">Relax</a></li>
                <li class="navitem"><a href="#">Testing 1</a></li>
                <li class="navitem"><a href="#">Testing 2 </a></li>
                <li class="navitem"><a href="#">Testing 3</a></li>
                <li class="navitem"><a href="#">Testing 4</a></li>
                <li class="navitem"><a href="#">Testing 5</a></li>
            </ul>
        </header>