Question

我在button元素中有一个dt。

starting image

一切看起来都不错，但是我想将按钮浮动到右边。

float right

当我在按钮上添加浮动时，现在dt更短，导致它看起来很差。

enter image description here

添加overflow:auto修复此问题，但现在左侧的文字不是垂直居中的。 vertical-align:center无法解决此问题，也不会通过使用display:table-cell;进行攻击来帮助解决此问题吗？

是否还有另一种实现此目的的方法？

<dt style="overflow:auto">Title <button style="float:right">save</button></dt>

Answer 1

通常我会这样做。

我的CSS：

dt {
    display: block;
    background: -webkit-linear-gradient(#bfbfbf 0%, #828282 100%);
    background:         linear-gradient(#bfbfbf 0%, #828282 100%);
    padding: 10px 20px;
    margin: 10px auto;
    border-radius: 3px;
    width: 400px;
}

dt:after {
    content: "";
    display: table;
    float: none;
}

dt p {
    display: inline-block;
}

dt button {
    margin: 0;
    padding-top: 3px;
    padding-bottom: 3px;
    float: right;
}

我的HTML：

<dt>
    <p>My Title</p>
    <button>Save</button>
</dt>

请记住，您的文字“我的标题”必须是inline-block，而不是block

我希望这有助于或至少指出正确的方向。

Answer 2

除了简单地浮动元素之外，还有更好的方法。我建议用div元素包装它们，或者创建一个表，当然假设你打算重复标题按钮结构。样本可能类似于：

<div style="width:50%;">Title</div>

<div style="width:50%;">
    <button style="float:right">Button</button>
</div>

EDIT ---

尝试快速而肮脏的表格方法：

<body>
<table style="width:100%">
    <tr><td>Title</td>
    <td><button style="float:right">save</button></td></tr>
</table>
</body>

另外，dt元素是什么？

Answer 3

我认为您只需清除浮动元素而不是使用overflow:auto;

示例：http://jsfiddle.net/ChrisMBarr/UGWuc/

修改

立即尝试：http://jsfiddle.net/ChrisMBarr/6HXek/5/

按钮有一些标题没有的填充。这使得它们具有匹配的垂直填充。

向右浮动按钮，同时保持文本的高度和垂直中心

3 个答案:

修改