html - 如何在 H3 标签的每一侧格式化按钮

Question

计划

[button] [h3] [button]

html

<span class="glyphicon glyphicon-chevron-left"></span>
<h3>Title may or may not be long enough to break to new line</h3>
<span class="glyphicon glyphicon-chevron-right"></span>

应该很简单吧？我一直以任何一个结束

[button] [h3]
[button]

或

[button]
[h3]
[button]

Answer 1

示例:http://jsfiddle.net/s9x2kxyz/

有更多方法可以做到这一点，但上面的 fiddle 展示了一种相当简单的方法:

HTML:

<span class="glyphicon glyphicon-chevron-left"></span>
<h3>Title may or may not be long enough to break to new line</h3>
<span class="glyphicon glyphicon-chevron-right"></span>

CSS:

h3, span {display:block;float:left;text-align:center;}
h3 {width:80%;margin-top:10px;}
span {width:10%;margin-top:15px;}

当您不知道 h3 上可能有多少行时，垂直对齐可能会变得棘手，但在这种情况下这就是野兽的本性……margin-top在我的示例中，只是展示了如何稍微控制它……它可能需要根据字体大小等而有所不同。希望这有助于为您指明正确的方向。

编辑:只是想指出，我使用原始 HTML 来回答问题，但根据它们的用途，这里的元素可能应该包含在 <a> 中。 (或 <button> )元素更加语义化，然后解决方案中的 CSS 将位于 <a> 上而不是跨度。这样做的主要好处是，如果在单击/悬停/聚焦这些元素时发生某些事情，有助于规范跨浏览器和设备的行为。