html - 有没有办法在导航栏顶部添加一个框?

标签 html css navbar

我的 HTML/CSS 入门类(class)要求我们在导航栏中放置一个框:它应该在导航右侧有一个通用的 Logo 框,背景色为黑色。它应该是 80 x 80 像素并触摸导航的右侧。

但是,我一直找不到任何方法可以在导航栏上放置一些东西。我尝试将 div 添加到导航栏,但随后该框隐藏在导航栏下方。有什么建议吗?

HTML(我知道这不是创建导航栏的最佳方式,但这是目前显示的内容:

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;
}

.box1 {
    height: 80px;
    width: 80px;
    background-color: red;
    border: 3px green;
    background-color: black;
}
<nav>
        <p class="p1">Home</p>
        <p class="p2">About</p>
        <p class="p3">Contact</p>
        <div class="box1"></div>
</nav>

最佳答案

您可以在带有 topleft 的框上使用 position:absolute

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;
}

.box1 {
  height: 80px;
  width: 80px;
  background-color: red;
  border: 3px green;
  background-color: black;
  position: absolute;
  top: 0;
  right:0;
}
<nav>
  <p class="p1">Home</p>
  <p class="p2">About</p>
  <p class="p3">Contact</p>
  <div class="box1"></div>
</nav>

关于html - 有没有办法在导航栏顶部添加一个框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69148788/

相关文章:

html - 如何去除表格顶部的边距?

html - 有效的 HTML 标签名称字符

html - 如何使用 CSS 使我的 Div 盒子支架在内部看起来像这样?

html - 如何在编码 html 电子邮件中使用表格?

ios - 当我将透明设置为否时,双击导航栏

javascript - 导航目录展开和折叠 Bootstrap 4

javascript - HTML5 : How to load element from left side menu into the right side

HTML/CSS : Centering a certain point instead an entire line of code

以图片居中的 HTML/CSS 水平导航栏

javascript - 需要居中整个导航栏,包括子菜单,找不到正确的代码。我的 JavaScript 搞砸了吗?