0

当我调整浏览器窗口的大小时，蓝色按钮位于左侧徽标下方，与文本“Welkom Bart”位于同一行，尽管它们是两个不同的层。我希望文本“Welkom Bart”也降低，所以它们不在同一行。我需要在我的 CSS 中添加什么？

普通的 大小

html 例如

<div id="mainmenu">
    <div id="logo"><img ... /></div>
    <div id="usermenu">Buttons</div>
</div>

<div id="maintitle">
    <h2>Welkom Bart</h2>
    <hr />
</div>

css

#mainmenu {
    height: 100px;
    position: relative;
}
#logo {
    float: left;
    width: 200px;
    margin-right: 20px;
}
#usermenu {
    float: right;
}
#maintitle {
    margin-bottom: 20px;
}
#maintitle hr {
    color: #56c2e1;
    display: block; 
    height: 1px;
    border: 0; 
    border-top: 1px solid #56c2e1;
    margin: 10px 0;
}
4

3 回答 3

1

添加clear:both到#maintitle=)

于 2013-09-30T14:49:39.340 回答
0

添加overflow:hidden到#mainmenu. 这将导致其高度包含所有浮动元素，例如您的#usermenu元素，从而允许在其下方继续流动。

于 2013-09-30T14:51:21.857 回答
0

用这个

<div id="maintitle" style="width:100%">
<h2>Welkom Bart</h2>
<hr />

于 2013-09-30T16:27:17.900 回答