0

如果我的问题看起来很愚蠢，我很抱歉，但我在这上面花了太多时间。我有一个 div 显示块，其中包含两个跨度，一个在右侧，另一个在左侧。

<div class="user-bar">
    <span class="username">Martin GOYOT</span>
    <span class="user-options"><input type="button" class="disconnect" value="déconnexion"/></span>
</div>

我尝试了两件事来让它们垂直对齐：第一个，让这两个浮动，但问题是我可以清楚地看到它们没有流动（正常），因此，如果我将背景应用于容器，它不包括它们：

http://jsfiddle.net/M7Ffd/1/

第二种解决方案，让第一个在流程中并将第二个作为浮点数，但结果是我不知道如何垂直对齐它们：

http://jsfiddle.net/M7Ffd/2/ （注意按钮，即使它看起来也不是真正垂直对齐）

所以，问题是：什么是最好的解决方案，以及如何解决这两种不当行为中的至少一种。

谢谢，对不起，我是一个CSS新手。

4

3 回答 3

1

垂直对齐是一个难题。浮动似乎是每个人对所有事情的第一个 goto 解决方案。避免 gotos，如何使用

position: absolute;
right: 0;

http://jsfiddle.net/M7Ffd/3/

于 2012-12-28T23:03:43.387 回答
0

对 2 个浮动子项的父元素使用 clearfix hack 来解决您的问题。

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

我更新了你的小提琴给你看http://jsfiddle.net/M7Ffd/5/

于 2012-12-28T23:51:59.947 回答
0

这是你想要的吗？在这里摆弄

.user-bar {
padding: 0.5em;
margin: 0 1em 1em 1em;
background-color: green;
font-weight: bold;
font-size: 1.25em;
height:30px;
min-width:300px;
}
.user-options {
display: inline-block;
background-color: #CCC;
float: right;
}
.username {
float: left;
background: yellowgreen;
}

​ 设置最小宽度并给出高度解决对齐+背景的解决方案。

于 2012-12-28T23:19:08.603 回答