Question

我正在执行标题导航栏，并且向左浮动的项目比向右浮动的项目具有更大的字体大小。您可能会在代码运行中看到的问题是，字体大小较小的项目与字体大小较大的项目无法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中以相反的顺序将它们导航，然后使用浮点数来反转它们的渲染方式（尝试使每个唯一的文本中的文字都明白我的意思））。

更多语义，使用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>

列出ul项的行为很奇怪

1 个答案: