带垂直分隔符css的按钮

Question

我正在尝试在图标和按钮上的某些文本之间添加垂直分隔符，但它只是将所有内容都推下来。那是为什么？

.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>

Answer 1

我会添加＆＃34; padding-top：0px！important;＆＃34;到.btn和＆＃34; vertical-align：top;＆＃34;到.separator。

＆＃13;

＆＃13;

.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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你正在从bootstrap中拉出按钮的填充。该填充正在推动内容，因为你的按钮上有一个固定的高度，它会被剪裁。如建议你可以重置填充，或只是删除按钮上的固定高度。另外作为一般性建议，除非您特别重写引导程序，否则不要重用它们的类名。我建议使用某种命名空间，如[myApp] - [button]。