对齐按钮？答案

【问题标题】：Align a button?对齐按钮？
【发布时间】：2012-02-28 13:45:30
【问题描述】：

我正在尝试将按钮向右对齐，而其他一些文本则放置在与左侧对齐的同一行中：

<h1 style="display:inline; text-align:left">
<span>somevalue</span>
</h1>
<input type="submit" value="somevalue" style="vertical-align:top; text-align: right"/>

结果：垂直对齐发生。向右对齐不。有谁知道为什么？还是解决方法？

【问题讨论】：

标签： html css

【解决方案1】：

你可以使用 float:left 和 float:right

    <h1 style="display:inline; float:left">    
    <span>somevalue</span>
</h1> 
    <input type="submit" value="somevalue" style="vertical-align:top; float: right"/>

【讨论】：

【解决方案2】：

您必须将按钮放在一个 div 内并设置 div 右对齐：

<div id="someDiv" style="display:inline; text-align:right">
    <h:commandButton value="somevalue" style="vertical-align:top"/>
</div>

【讨论】：

那个 div 也需要 display:inline;
@AndrewBacon 编辑了答案。无论如何，display:inline 默认设置为 HTML 元素，但它可以改进此示例中的答案:)
一个 DIV 默认为 display:block; , SPAN 默认为 display:inline;