我正在尝试在图标和按钮上的一些文本之间添加一个垂直分隔符,但它只是将所有内容都推低。为什么?
.btn {
height: 22px;
border: 1px solid #B9B9B9;
font-weight: normal;
font-size: 11px;
color: #003E7E;
text-align: left;
line-height: 12px;
width: 200px;
}
.separator {
content: '';
display: inline-block;
background: #888;
margin: 0px 4px;
height: 18px;
width: 1px;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn">
<span class="icon-plus"></span>
<span class="separator"></span>
ABC0102165
</button>
我会在.btn中添加"padding-top: 0px !important;",在.separator中添加"vertical-align: top;"。
.btn {
height: 22px;
border: 1px solid #B9B9B9;
font-weight: normal;
font-size: 11px;
color: #003E7E;
text-align: left;
line-height: 12px;
width: 200px;
padding-top: 0px !important;
}
.separator {
content: '';
display: inline-block;
background: #888;
margin: 0px 4px;
height: 18px;
width: 1px;
vertical-align: top;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn">
<span class="icon-plus"></span>
<span class="separator"></span>
ABC0102165
</button>
您正在从引导程序中提取按钮的填充。该填充正在向下推动内容,并且由于按钮上有固定的高度,因此它被剪裁了。按照建议,您可以重置填充,或者只是删除按钮上的固定高度。此外,作为一般建议,除非您特别覆盖引导程序,否则不要重用它们的类名。我建议使用某种命名空间,如 [myApp]-[button]。