html - 列出 ul 元素表现得很奇怪

Question

我正在做一个标题导航栏，并且在向左浮动的元素中有一个比其他向右浮动的元素更大的字体大小。您可能会在 coderun 中看到的问题是，字体较小的元素与字体较大的元素不是 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>

Answer 1

像这样呈现导航可能有点笨拙，因为您需要在 HTML 中以相反的顺序排列它们，然后使用 float 来反转它们的呈现方式(尝试使每个文本中的文本唯一以了解我的意思).

一些更语义化的东西，使用 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>