Question

如果我的问题看起来很愚蠢，我很抱歉，但是我花了太多时间在这上面。我有一个包含两个跨度的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/（小心按钮，即使看起来也没有垂直对齐）

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

谢谢，对不起，我是一名新手。

Answer 1

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

position: absolute;
right: 0;

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

Answer 2

这是你想要的吗？小提琴here

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

设置最小宽度和给出高度可以解决对齐+背景解决方案。

Answer 3

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

垂直对齐和浮动

3 个答案: