在同一条线上每侧有两个div

Question

如何让它保持在同一条线上？我想要“你好吗？”与菜单位于同一行。

<div class="header">

<b>How ya doin?</b>

<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Support</a></li>
</ul>

</div>

CSS：

* { margin: 0; padding: 0; }

.header {
background: #CCC;
font-weight: bold;
padding: 5px 5px 3px 16px;
}

ul {
padding-left: 10px;
color: #444;
list-style: none;
margin: 0px 0px 5px 10px;
}

.menu {
font-weight: normal;
background: #CCC;
color: #000;
text-align: right;
}

.menu li {
display: inline;
margin-right: 8px;
}

这就是我得到的：

Answer 1

我给b和ul两个宽度，比如50％让它变得容易，然后向右和向左漂浮一个。

然后你需要一个div来清除它以修复布局。

类似的东西：

.header b {
    width:50%;
    float:left;
}

.header ul {
    width:50%;
    float:right;
}

然后在

下面

<div style="clear:both"></div>

避免弄乱。

Answer 2

尝试

ul {
    display:inline;
    /* ... */
}

Answer 3

类似的东西：

.header b{display:block; width: 100px; float:left}

.menu {width:150px; float:left}

祝你好运

Answer 4

使用绝对/相对位置怎么样？ 这对于标题文本来说真的是一个简单而漂亮的解决方案，也很容易添加其他元素

.header{
    position: relative;
}

.header > b{
    position: absolute;
    left: 10px;
    top: 5px;
}

.header > ul{
    position: absolute;
    top: 5px;
    right: 10px;
}

Answer 5

<div class="header">

<!-- float to left -->
<b style="float: left;">How ya doin?</b>

<!-- float to right, or you can add float to .menu in css -->
<ul style="float: right;" class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Support</a></li>
</ul>

<!-- clearing float -->
<br style="clear:both;" />

</div>

Answer 6

我将你的CSS更改为了这个并且似乎可以解决这个问题（补充说明）：

* { margin: 0; padding: 0; }

.header {
background: #CCC;
font-weight: bold;
padding: 5px 5px 3px 16px;
float:left; /* ADDED */
width:100%; /* ADDED */
}
b {
float:left; /* ADDED */
}
ul {
padding-left: 10px;
color: #444;
list-style: none;
margin: 0px 0px 5px 10px;
}

.menu {
font-weight: normal;
background: #CCC;
color: #000;
text-align: right;
}

.menu li {
display: inline;
margin-right: 8px;
}

Answer 7

ul是一个块元素，因此默认情况下它从新行开始，占用可用宽度的100％。你需要告诉它表现不同。

最简单的方法是在display: inline;元素上设置ul。

另一个是在float: left;和<b>上设置<ul>，并为他们提供width。

如果采用后者（浮点）方法，则需要告诉.header包含浮点数。最简单的方法是height: 1%; overflow: hidden;。