Html 为什么不'；我的嵌套div看起来不是嵌套的吗？

我把一个div放在另一个div里面，但是它一直出现在它嵌套的div下面。我想要的是让登录div出现在navdiv中，但将其推到页面右侧。 我可以通过添加position-absolute（这一点我也不确定）来获得它，但是当我调整页面大小时，它会以我不希望的方式运行

请尽可能简单地解释这里发生的事情。谢谢

HTML

注销
登录

将此代码放入css中

.left_part { float:left;width:72%;}
.right_part { float:right;width:28%;}
.right_part ul { padding-left:0px;}

在身体部位加上这个

 <div id="navdiv">
    <div class="left_part">
        <ul>
              <li><a href="http://codepen.io/viggie/pen/ragPVG">Home</a></li>
              <li><a href="www.yahoo.com">Members</a></li>
              <li><a href="www.espn.com">Articles</a></li>
              <li><a href="www.google.com">Videos</a></li>
              <li><a href="http://codepen.io/anon/pen/dPBRqp">Join</a></li>
        </ul>
    </div>
      <div class="right_part">
            <ul>
                  <li>Log out</li>
                  <li>Log in</li>
            </ul>
      </div>
  </div>

注销
登录

我只是给了你正常的想法，现在我希望你能用这种方式管理你自己的css…希望它能有所帮助

已更新

根据你的说法…只要在ul和登录div中使用Float，因为登录div在你不使用Float left或right属性之前不会与ul一起使用。它们有自己的css，你必须为此使用Float…可以有更多的选项，但如果你不想更多div，Float将帮助你…

，而你的

\login

div在

#navdiv

的内部，有一个

高度
设置，阻止背景延伸到
#login
区域-从结构上说，
#navdiv
在内部，但从视觉上看，它溢出了
#navdiv
区域

因此，要停止该位，只需从
#navdiv
中删除
高度

要将登录名向右对齐，我建议将
#login ul
设置为一个
内联块
，该块只需对齐
向右
。您将失去
绝对
和
浮动
问题，并且很容易做出响应

#login {
    text-align: right;
}
#login ul {
    padding-right: 10px;
    padding-left: 10px;
    background-color: yellow;
    display: inline-block;
}

注意，我还在
ul
上添加了背景色，因为它对
#login
区域更准确-可能您还需要修改一些样式

在
#navdiv
css中删除
高度
，并添加
溢出：auto
将包含
#navdiv
中的所有菜单项，这与我希望它做的事情更相似。查找overflow auto，尽管它所说的只是在文本无法放入div时创建一个滚动条。为什么会将div放入div中？还有，为什么我需要告诉它，我已经将div嵌套在另一个div的内部，它不应该自动放置在内部吗？非常感谢您的帮助。要删除水平滚动，请添加
overflow-x:hidden
到
#navdiv
我理解您试图用这个解决方案做什么。但我真正的问题是，为什么我不能简单地将一个div放在另一个div中？为什么它显示在第一个div的下面而不是里面？因为你没有使用float。请检查我更新的ans。但是如果你使用float，那么你也必须使用clear和其他一些属性…小心使用float。。。
 <div id="navdiv">
    <div class="left_part">
        <ul>
              <li><a href="http://codepen.io/viggie/pen/ragPVG">Home</a></li>
              <li><a href="www.yahoo.com">Members</a></li>
              <li><a href="www.espn.com">Articles</a></li>
              <li><a href="www.google.com">Videos</a></li>
              <li><a href="http://codepen.io/anon/pen/dPBRqp">Join</a></li>
        </ul>
    </div>
      <div class="right_part">
            <ul>
                  <li>Log out</li>
                  <li>Log in</li>
            </ul>
      </div>
  </div>

#login {
    text-align: right;
}
#login ul {
    padding-right: 10px;
    padding-left: 10px;
    background-color: yellow;
    display: inline-block;
}