如何在导航栏navbar右侧添加80*80黑色logo占位盒并置于顶层？

问题根源 #

你代码里的<p>标签默认为块级元素，每个标签会独占整行宽度，3个<p>标签的高度累加后已经超过了nav设置的80px总高度，因此.box1被挤到了nav的可视区域外，视觉上就像被隐藏在导航栏下方。

解决方法（符合入门课程常用实现逻辑） #

方法1：使用浮动实现（入门阶段优先掌握）

浮动是入门CSS常用的流式布局方法，只需给左侧导航项加左浮动、右侧logo盒加右浮动即可实现需求，无需修改原有HTML结构：

/* 新增导航项样式，让三个导航链接横向排列 */
nav p {
    float: left;
    margin: 0 18px; /* 可自行调整数值控制导航项间距 */
    line-height: 76px; /* 导航总高80px减去底部4px边框，让文字垂直居中 */
}

.box1 {
    height: 80px;
    width: 80px;
    background-color: black;
    float: right; /* 右浮动直接贴紧导航栏右边缘 */
}

方法2：使用Flex布局（更简洁的现代方案，若课程已覆盖可使用）

给nav开启Flex布局，无需单独给子元素加浮动，代码更易维护：

nav {
    height: 80px;
    width: 100%;
    background-color: white;
    border-bottom: 4px solid green;
    box-shadow: 10px 10px 10px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    /* 新增Flex布局配置 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; /* 可调整控制导航左右内边距 */
}
/* 新增导航项外层容器样式 */
.nav-links {
    display: flex;
    gap: 30px; /* 控制导航项间距 */
    margin: 0;
    padding: 0;
}
.box1 {
    height: 80px;
    width: 80px;
    background-color: black;
}

对应HTML调整为：

<nav>
    <div class="nav-links">
        <p class="p1">Home</p>
        <p class="p2">About</p>
        <p class="p3">Contact</p>
    </div>
    <div class="box1"></div>
</nav>

冗余代码提示 #

你原.box1样式里重复写了两次background-color，且border: 3px green缺少边框样式（比如solid），如果不需要边框可以直接删除该行。

内容的提问来源于stack exchange，提问作者Spencer