Question

好的，基本上我想要这样的页面。

（按钮）（带边框的数字）（按钮）

请记住，所有这些都将在另一个边界。

代码有点像：

    <button>TEST</button> <p>4</p> <button>TEST</button>

那么如何正确对齐呢？我想要它，所以数字4在中心，然后在右边和左边是按钮，都在同一条线上。

Answer 1

CSS（这给出了一个围绕数字的框）

span.numborder {
display:inline-block;
border:1px solid #000000;
padding:2px;
}

HTML

<button>TEST</button> <span class="numborder">4</span> <button>TEST</button>

Answer 2

我建议使用表格

<table>
    <tr>
        <td> <button>TEST</button> </td>
        <td> <p>4</p> </td>
        <td> <button>TEST</button> </td>
    </tr>
</table>

完成它的HTML有点长，但它可以很容易地以相同的方式添加你想要排列的其他元素。

JSFiddle：http://jsfiddle.net/JHgyy/

Answer 3

使用display: inline-block。将其分配给您要对齐的元素

DEMO http://jsfiddle.net/x7vpU/

button, p {
    display: inline-block;
}

将一个类分配给它的容器，以便页面上的所有元素都不会根据此规则对齐

DEMO http://jsfiddle.net/x7vpU/1/

    <div class="buttons-row">
    <button>TEST</button> <p>4</p> <button>TEST</button>
    </div>

    .buttons-row button, .buttons-row p {
        display: inline-block;
    }

如果您使用span代替<p>，那么您将不需要任何CSS

DEMO http://jsfiddle.net/x7vpU/3/

<p><button>TEST</button> <span>4</span> <button>TEST</button></p>

Answer 4

<span><button>TEST</button></span><span> <p>4</p> </span><span><button>TEST</button></span>

这肯定会奏效。因为＆lt;跨度＆GT;标签工作内联

HTML在同一行上对齐

4 个答案: