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

Question

我有一个 button在 dt 里面元素。

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

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

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

请记住，您的文本 block “我的标题”需要是 inline-block 而不是 block

我希望这对您有所帮助，或者至少为您指明了正确的方向。