Question

我已将一个div放在另一个div中，但它一直出现在嵌入其中的div下面。我想要的是让登录div出现在navdiv内部，但将其推到页面右侧。我可以通过添加绝对位置（我也不确定）来获取它，但是当我调整页面大小时它会以我不想要的方式运行。

请尝试尽可能简单地解释这里发生的事情。谢谢！ http://jsfiddle.net/viggie/5we2wxug/

#navdiv {
  display: block;
  background-color: blue;
  height: 20px;
  margin-bottom: 7px;
}
ul {
  text-align: center;
}
#navdiv li {
  background-color: red;
  display :inline;
  font-size: 1.3em;
  padding-left: 25px;
  padding-right: 25px;
  vertical-align: middle;
  margin-left:35px;
  margin-right:35px;
  margin-bottom:4px;
}
#navdiv li a:visited {
  color: yellow;
}
#navdiv li:hover {
  background-color: green;
}

#login {
  padding-right: 10px;
  padding-left: 10px;
  background-color: yellow;
  top: 0;
  right: 0;
}
#login li {
  verticle-align: middle;
}

HTML

 <div id="navdiv">
    <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 id="login">
      <ul>
        <li>Log out</li>
        <li>Log in</li>
      </ul>
    </div>
  </div>

Answer 1

将此代码放入您的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不会使用ul，直到你没有使用浮动左或右属性..他们有自己的CSS，你必须使用浮动这...可以有更多的选择，但如果你不想要更多的div，浮动将帮助你的情况..

Answer 2

虽然您的#login div在技术上位于#navdiv范围内，但#navdiv设置了height，这会阻止背景延伸至涵盖#login好吧 - #login在结构内部，但在视觉上它溢出#navdiv区域。

因此，要停止该位，只需从height删除#navdiv。

要使登录向右对齐，我建议您将#login ul inline-block与right对齐。您丢失了absolute和float问题，并且很容易做出响应。

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

注意，我也将背景颜色放在ul上，因为它对#login区域更准确 - 可能你还想修改一些样式。

http://jsfiddle.net/daCrosby/5we2wxug/1/

为什么我的嵌套div看起来不是嵌套的？

2 个答案: