0

我有一个元素的button内部。dt

起始图像

一切看起来都很好，但是我想将按钮浮动到右侧。

向右浮动

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

在此处输入图像描述

添加overflow:auto解决了这个问题，但现在左侧的文本不是垂直居中的。vertical-align:center不能解决这个问题，也不能通过破解它来帮助它有display:table-cell;没有另一种我忽略的方法来完成这个？

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

4

3 回答 3

2

这通常是我会这样做的方式。

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

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

于 2013-08-16T23:23:10.523 回答
-1

有比简单地浮动元素更好的方法。我建议要么用 div 元素包装它们，要么创建一个表格，当然假设您计划重复标题按钮结构。样本可能类似于：

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

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

编辑 - -

尝试快速脏表方法：

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

另外，dt 元素是什么？

于 2013-01-31T05:24:52.910 回答
-1

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

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

编辑

现在试试这个：http: //jsfiddle.net/ChrisMBarr/6HXek/5/

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

于 2013-01-31T05:31:24.553 回答