我在创建标题时遇到了一些问题.

(编辑)当我在ul上使用height: 100%;时,this发生了.

这是我的HTML:

 <header>
        <div class="logo">
            <img src="img/logo.png"/>
        </div>
        <nav>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">WORKS</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>
    </header>

这是我的俏皮话:

$BLACK:#000;
$WHITE:#fff;

* {
    box-sizing: border-box;
}

header {
    width: 100%;
    height: 75px;
    background-color: $BLACK;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .logo {
        width: 50%;
        display: flex;
        align-items: center;
        padding-left: 50px;
    }

    nav {
        width: 50%;
        padding-right: 50px;

        ul {
            list-style-type: none;
            display: flex;
            flex-flow: row wrap;
            justify-content: right;

            li {
                display: inline-block;
                margin-left:50px;

                a {
                    text-decoration: none;
                    color: $WHITE;
                }
            }
        }
    }
}

推荐答案

这里有一个解决方案.只需向li元素添加line-height: 75px;,然后通过添加margin: 0px;将ul元素的边距设置为零.

* {
    box-sizing: border-box;
}
header {
    width: 100%;
    height: 75px;
    background-color: #000;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
header .logo {
    width: 50%;
    display: flex;
    align-items: center;
    padding-left: 50px;
}
header nav {
    width: 50%;
    padding-right: 50px;
}
header nav ul {
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: right;
    margin: 0px;
}
header nav ul li {
    display: inline-block;
    margin-left: 50px;
    line-height: 75px;
}
header nav ul li a {
    text-decoration: none;
    color: #fff;
}
<header>
    <div class="logo">
        <img src="img/logo.png"/>
    </div>
    <nav>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">WORKS</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </nav>
</header>

不过,我将您的SASS代码转换为CSS,以便在堆栈溢出代码段运行程序上运行它.如果你想的话,你可以再把这个改成SASS.

谢谢并致以最良好的问候!

Html相关问答推荐

Tailwincss:自动设置网格高度

HTML+CSS+JS动态选中文本高亮 colored颜色 变化

为什么在移动视图中,这个水平可滚动的表格会在表格的右侧显示额外的空间?

如何使用html和css关键帧创建动画

水平卷轴的内容保持堆叠

轨道上的居中范围滑块拇指(Webkit)

在弹性框布局中的第n个元素后强制换行

使用不同字体对齐元素

网格布局中的组件

将三个div转换为显示flex

带有数据 URI 的音频在 Chrome 中失败

使单行路径的 svg 填充父级的 100% 宽度

为什么每当我调整图片大小时它都会使我的其他元素移动

HTML画布放大/缩小算法与CSS(图像处理)

如何清除html输入中的文本

如何让 backdrop-filter: blur() 效果在 iOS 上运行?

让 Iframe 覆盖整个页面

使用模板循环每行列出 3 个 bootstrap 卡

样式不适用于来自 tailwindcss 的网络

如何使用 nth-child() 设置列表样式