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

时间:2009-10-23 10:52:09

标签: html css xhtml

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

<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;
}

这就是我得到的: alt text

7 个答案:

答案 0 :(得分:1)

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

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

类似的东西:

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

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

然后在

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

避免弄乱。

答案 1 :(得分:1)

尝试

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

答案 2 :(得分:0)

类似的东西:

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

.menu {width:150px; float:left}
祝你好运

答案 3 :(得分:0)

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

.header{
    position: relative;
}

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

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

答案 4 :(得分:0)

<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>

答案 5 :(得分:0)

我将你的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;
}

答案 6 :(得分:0)

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

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

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

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