html - div 没有出现在 brother navbar div 下面？-6ren

html - div 没有出现在 brother navbar div 下面？

转载作者：太空宇宙更新时间：2023-11-04 02:36:38

24

4

我是业余爱好者，我不确定为什么这个 div 没有出现在导航栏 div 下面。我引用的 div 是 #sponsorBar div。

感谢您的帮助，如果我需要添加任何其他信息，请告诉我。

body {
  background-color:black;
  margin:0;
  padding:0;
}

#navBar {
  position:fixed;
  float:left;
  background-color:white;
  text-align:center;
  height: 50px;
  width:100%;
  margin:0;
  padding:0;
  top:0;
}

#navList {
  display:inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color:white;
}

#navList li {
  float:left;
}

#navList li:nth-child(1) {
  border-left: 0;
}

#navList li:nth-child(3) {
  margin-right: 100px;
}

#navList li:nth-child(5) {
  margin-left: 100px;
}

#navList li:nth-child(7) {
  border-right: 0;
}

#navList li a {
  display:inline-block;
  font-family:'Helvetica Neue', Helvetica, sans-serif;
  font-weight:bold;
  text-decoration:none;
  color:black;
  font-size:1.2em;
  vertical-align:-17px;
  margin: 0;
  padding: 0;
  height:50px;
}

#navList li:hover {
  background-color: black;
}

#navList li:hover a {
  color:white;
}

.navImage {
  float:left;
  display:block;
  margin:0;
  padding:0;
  max-height: 50px;
}
.navImage:hover {
  background-color: white;
}

.navListItem_left {
  border-left: 1px solid black;
  height: 50px;
  width:100px;
}

.navListItem_right {
  border-right: 1px solid black;
  height: 50px;
  width:100px;
}

#sponsorBar {
  clear:left;
  position:relative;
  display:block;
  background-color:white;
  height:100px;
  width:80%;
  margin:100px;
}

<div id="navBar">
  <ul id="navList" class="navListItem">
    <li class="navListItem_left">
      <a href="index.html">Home</a>
    </li>
    <li class="navListItem_left">
      <a href="teams.html">Teams</a>
    </li>
    <li class="navListItem_left">
      <a href="articles.html">Articles</a>
    </li>
    <li>
      <a href="/index.html">
        <img src="img/simplify_black_transparent_500x500.gif" class="navImage"/>
      </a>
    </li>
    <li class="navListItem_right">
      <a href="menu5.html">Menu4</a>
    </li>
    <li class="navListItem_right">
      <a href="about.html">About Us</a>
    </li>
    <li class="navListItem_right">
      <a href="partners.html">Partners</a>
    </li>
  </ul>
</div>
<!--Sponsor Div-->
<div id="sponsorBar">
  <p style="color:red;">TEST</p>
</div>

https://jsfiddle.net/abelgoodwin1988/a6tthq9k/

最佳答案

哇!那太奇怪了!出于某种原因，JSFiddle 不喜欢 id“sponsorBar”。我不知道为什么。当我将 id(和相应的 CSS 代码)更改为 sB 时，它没有问题!!

https://jsfiddle.net/a6tthq9k/3/HTML:

<body>
    <!--Navigation Div-->
    <div id="navBar">
        <ul id="navList" class="navListItem">
            <li class="navListItem_left">
                <a href="index.html">Home</a>
            </li>
            <li class="navListItem_left">
                <a href="teams.html">Teams</a>
            </li>
            <li class="navListItem_left">
                <a href="articles.html">Articles</a>
            </li>
            <li>
                <a href="/index.html">
                    <img src="img/simplify_black_transparent_500x500.gif" class="navImage"/>
                </a>
            </li>
            <li class="navListItem_right">
                <a href="menu5.html">Menu4</a>
            </li>
            <li class="navListItem_right">
                <a href="about.html">About Us</a>
            </li>
            <li class="navListItem_right">
                <a href="partners.html">Partners</a>
            </li>
        </ul>
    </div>
    <!--Sponsor Div-->
    <div id="sB">
        <p style="color:red;">TEST</p>
    </div>
    <!--Content Div-->
</body>

CSS:

 body {
        background-color:black;
        margin:0;
        padding:0;
    }

    #navBar {
        position:fixed;
        float:left;

        background-color:white;
        text-align:center;

        height: 50px;
        width:100%;

        margin:0;
        padding:0;

        top:0;
    }

    #navList {
        display:inline-block;
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color:white;
    }
    #navList li {
        float:left;
    }
    #navList li:nth-child(1) {
        border-left: 0;
    }
    #navList li:nth-child(3) {
        margin-right: 100px;
    }
    #navList li:nth-child(5) {
        margin-left: 100px;
    }
    #navList li:nth-child(7) {
        border-right: 0;
    }
    #navList li a {
        display:inline-block;
        font-family:'Helvetica Neue', Helvetica, sans-serif;
        font-weight:bold;
        text-decoration:none;
        color:black;
        font-size:1.2em;

        vertical-align:-17px;

        margin: 0;
        padding: 0;

        height:50px;
    }

    #navList li:hover {
        background-color: black;
    }
    #navList li:hover a {
        color:white;
    }

    .navImage {
        float:left;
        display:block;
        margin:0;
        padding:0;

        max-height: 50px;
    }
    .navImage:hover {
        background-color: white;
    }

    .navListItem_left {
        border-left: 1px solid black;
        height: 50px;
        width:100px;

    }

    .navListItem_right {
        border-right: 1px solid black;
        height: 50px;
        width:100px;
    }

    #sB {
        clear:left;
        position:relative;
        display:block;

        background-color:white;

        height:100px;
        width:80%;

        margin:100px;
    }

关于html - div 没有出现在 brother navbar div 下面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35545907/

24

4

0

文章推荐： node.js - 在 Windows 8 中启动时自动启动 Node.js 服务器

文章推荐： C libyaml 基于文档的解析

文章推荐： python - 在 windows 10 中安装 pytesseract

文章推荐： c - c中的形式参数和实际参数

html - 菜单栏菜单在另一个 div 下面？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。关于您编写的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码以重现它。参见 SS
Android RecyclerView 不出现在 EditText 下面
我有一个布局，它有一个 EditText，当用户输入时应该在它下面显示建议。我以编程方式创建了一个 RecyclerView，它应该在 EditText 下面显示建议项目。但是当用户输入时它不显示 R
html -
每三个
下面
我正在尝试将下面各三 s(一个每三个 s)，但是我得到了意想不到的结果。我得出的结论是我必须放一个低于三分之一，但是当我这样做时，它的位置不正确(请参阅演示)。我正在使用这个 Djan
html - Div 向下推到另一个 Div 下面
我知道这个问题已经被问过好几次了，我已经尝试了其他答案中建议的所有方法，但似乎没有任何方法可以使我的 div 位于需要的位置。奇怪的是，一夜之间我的一个 div 想要低于前一个 div。开始时是 fl
css - 元素隐藏在溢出 :auto element 下面
好的，我明白了，当离开 .wrapper 时，带有 overflow:hidden 的元素 .wrapper 的所有子元素都会被自然切割的边界框。但这里我只应用了overflow:auto。是关于下
css - 使内容出现在 :before pseudo selector? 下面
我有一个元素 The result is ... Test_then 类如下所示: .Test_then::before { content: 'Then'; } 我的目标是让 (The resu
jquery - 下拉菜单需要显示在所有内容之上，但它在某个 div 下面
我有一个下拉菜单，它适用于除 IE6 和 IE7 之外的所有内容。 Here it is in the Safari/Firefox browsers Here is how it looks in
android - DrawerLayout 隐藏在 GridView 下面
我尝试从支持库 13 实现最新的抽屉布局。使用以下代码，抽屉始终显示在 gridview 下方。即使我尝试调用 bringToFront() 仍然无法正常工作。能帮忙看看是什么问题吗？谢谢。 acti
css - 你能模糊 div 下面/后面的内容吗？
这个问题在这里已经有了答案: using a div to blur an image behind it? [duplicate] (2 个答案) 关闭 7 年前。我目前正在 Photoshop
java - 对简单的 While 循环感到困惑 - 躲在 table 下面
我正在阅读一本有关 Java 的书，并发现了以下源代码。 //This example demonstrates how to search multiple occurences of a sear
javascript - 将新的 div 向下滑动到另一个 div 下面
我想让一个新的/隐藏的 div 从另一个 div 下面滑下来。我的想法是我有一个输入字段和一个添加按钮。单击添加按钮时，会显示更多表单元素(从下方滑出)。这个的形式部分对我的问题并不重要，所以我只让第
ios - 如何正确地将 UIView 连续移动到 UIButtons 下面
我正在制作一种标签栏，其下方有一个指示器，指示选择了哪个标签。我的 View 层次结构非常简单: --------------------------------- |-------------
CSS 内容 div 被推到菜单 div 下面
我什至不知道如何描述这一点，我还在学习，而且还是个新手。我有一个用于容器的 div。里面有一个用于菜单的 div 和一个用于内容的 div，两者并排向左浮动。对于大多数普通内容，它们并排放置。然
html - 我正在尝试将一个 div 堆叠在浏览器窗口高度的 div 下面
我想要一个与浏览器窗口高度相同的 div，以及位于该 div 下方的另一个 div。我所有的尝试都未能堆叠 div，而是将它们重叠。我的元素正在尝试的一种天真的实现。这是我的 fiddle
CSS Floated div 出现在父 div 下面
我正在尝试根据 this codepen 设置联系表单的样式并且 float 表单在其父 div 下面而不是在其中时遇到问题。我试过添加一个 clearfix，但没有成功。我也没有运气就把溢出弄得一团
html - 调整窗口大小时，div 移动到其他 div 下面
我是网络开发新手，需要一些帮助来解决这个简单的问题。调整大小时，菜单项会移动到名称下方，有人能告诉我哪里搞砸了吗？我一直在阅读其他一些解决方案并了解想法，但就是找不到我的错误。 > A
css - 将绝对 div 定位在相对 div 下面
我正在尝试为移动设备开发一个 HTML5 应用程序。布局是非常基本的标题和内容。标题(红色矩形)、内容(绿色矩形)是绝对 div。如果高度大于屏幕，则内容必须是可滚动的。当我试图只在橙色矩形 di
html - 将 ul 列表移到 div 下面
我正在尝试将这个 ul 移动到 div 下面，我什至不确定这是否也是完美的方法，这是代码， HTML User 1
css - 不能将 div 放在相对 div 下面
我的处境很复杂。首先，我有两列，当屏幕变小时，它们会在彼此下面。我的问题是在其中一列中我有一个相对的 div。我想要另一个 div 直接在它下面，但它一直与第一个 div 重叠。这是我的代码:
html - 怎么把 table 放在另一张 table 下面
例如，如果我使用了对齐，如何将一张 table 放在另一张 table 下面。 center_table left_table desired_table

首页

博学

6Ren·AI

商城

html - div 没有出现在 brother navbar div 下面？