html - 元素未正确内联填充 :0

Question

文本为“Project Howto”的按钮应该与文本为“Sign In or Register”的按钮内联

我已经删除了填充 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 上的填充但在 child 身上<button> btn btn-default btn-lg dropdown-toggle .然后，您的填充将被删除。

但它仍然不会是相同的高度，因为:

• 字体大小不一样
• 第二个按钮中有两个元素

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

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

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