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

如果没有编写任何额外的CSS，你可以简单地使用＆＃34; col-xs＆＃34;引导程序将按钮保持在同一级别，

Here is a demo

您可以将col-xs类添加到按钮，将h3添加为

span{
   width:20%;
   float:left;
   text-align:center;
}
h3{
   width:60%;
   float:left;    
   text-align:center;
}

Answer 2

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

有很多方法可以做到这一点，但上面提到的方法很简单：

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>而不是span。这样做的主要好处是，如果在点击/悬停/聚焦这些元素时发生某些事情，可以帮助规范浏览器和设备的行为。

Answer 3

您可以使用右侧填充左侧和填充为左侧和右侧按钮创建空间。然后使用绝对位置定位按钮。如果您有固定宽度按钮和动态宽度内容，则此代码段非常有用。

＆＃13;

h3 {
    text-align: center;
}
#h3-container {
    position: relative; 
    padding-left: 100px; 
    padding-right: 100px;
}

button {
    position: absolute;
    top: 0;
    width: 90px;
    height: 30px;
}

button.left {
    left: 0;
}

button.right {
    right: 0;
}

＆＃13;

<div id="h3-container">
    <button class="left">Button</button>
    <h3>Title may or may not be long enough to break to new line</h3>
    <button class="right">Button</button>
</div>

＆＃13;

Answer 4

可以这样做：

div{
    position: relative;
}

h3{
    padding: 0 30px;
}

span{
    position: absolute;
    top: 0;
}

span:last-child{
    right: 0;
}

FIDDLE：https://jsfiddle.net/lmgonzalves/znot1r11/3/

Answer 5

这是另一个可以解决问题的解决方案。

＆＃13;

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

＆＃13;

DSN=ABCD;DATABASE=db1;UID=userid;PWD=passwd

＆＃13;

Answer 6

只需将跨度放在块级H3元素中，如下所示：

div2

如何格式化H3标签两侧的按钮

6 个答案: