Question

这是标题部分，其中包含左侧的徽标和右侧的同一div中的登录链接。我一直试图让登录文本没有从#header_section溢出。

我的代码出了什么问题？顺便说一下，我刚开始学习CSS。

div#container
{
    background: url(../images/bg_inner.png) repeat;
    margin-left: auto; 
    margin-right: auto;
    width:  950px; 
    text-align: left;
}

div#header_section
{
    width: 930px;
    height: 65px;
    position: relative;
    margin: 5px;
}

#logo
{
    background: url(../images/logo.png) left no-repeat;
    margin: 5px;
    border: none;
    height: 55px;
    width: 200px;
}

.login
{
    font-size: 22px;
    color:#4A4A4A;
    width: 60px;
    float: right;
}

<div id="header_section">
    <a href="index.php" id="logo"></a>
    <a href="login.php" class="login">Login</a>
</div>

Answer 1

疯狂猜测：改变

div#header_section
{
    overflow: hidden;
    ...rest of stuff
}

Answer 2

如果文字溢出则可能在标题部分中需要clearing div。我只是猜测你，因为你浮动你是登录元素（我假设它是一个div）在右边。没有详细的截图，很难说清楚。

div#headerSection {
   ...
   overflow: auto;
   width: 100%
}

Answer 3

浮动元素时，要将其放在未浮动的元素之前。正如其他人所提到的那样，你可能想要一个“清算div”，即使它起作用，只是为了好的措施。

基本上，试试这个：

<div id="header_section">
    <a href="login.php" class="login">Login</a>
    <a href="index.php" id="logo"></a>
    <div class="clear"></div>
</div>

然后为“清除div”定义以下内容：

.clear {
  clear: both;
}

登录似乎是从div溢出

3 个答案: