Question

带有文本“Project Howto”的按钮应该使用带有“登录或注册”文本的按钮进行内联

我已经删除了填充padding:0但是当我检查它时......仍然出现填充

<div class="btn-group input-group-btn" style="padding:0;">
  <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" style="margin:0px;">
  Project HowTo:
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
     <li><a href="#">Dropdown link</a></li>
     <li><a href="#">Dropdown link</a></li>
  </ul>
</div>

http://codepen.io/anon/pen/hjAGo

Answer 1

填充内容不会在<div> btn-group input-group-btn上移除，而是在子<button> btn btn-default btn-lg dropdown-toggle上移除。然后，删除你的填充。

但它仍然不会是同一个高度因为：

字体大小不同
第二个按钮中有两个元素

强制这些按钮共享相同高度的唯一方法是给它们一个特定的按钮：

btn-group.input-group-btn button {
  height: 50px;
}

演示：http://codepen.io/anon/pen/ByIwl

Answer 2

由于Project HowTo:按钮具有填充，因此按钮组正在填充。

将以下css设置为btn btn-default dropdown-toggle元素：

  .input-group-btn:last-child>.btn {
  padding: 1.5px 4px;
  line-height: 1.45;
  }

您可以为该元素添加内联样式或添加自定义类，并使用给定的样式覆盖。

Answer 3

我尝试了这个，但它确实有效。为填充0添加了内联样式。

<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" style="margin:0px;padding:0;">
              Project HowTo:
              <span class="caret"></span>
            </button>

元素没有使用填充内联正确：0

3 个答案:

我尝试了这个，但它确实有效。为填充0添加了内联样式。