如何获得按钮的轮廓以填充其所包含的范围？

Question

下图中的蓝色是按钮，绿色代表其中的span。

当我点击时，我希望按钮的颜色更改和点击效果填满整个span。现在，它只填补了蓝色区域。

我在按钮上尝试了button-block，以及width:100%。顺便说一句，这一切都发生在我的导航栏中。

修改 代码：

   <ul class="nav nav-tabs">
      <li><img src="assets/mylogo.png" class="logo-small"></li>

      <div class="input-group" style="width:80%;">
        <input type="text" class="form-control" style="height: 60px; border: 0; outline:none; box-shadow: none;" placeholder="Search here" onsubmit="do()"/>
        <span type="button" class="input-group-addon" id="shade" style="background-color: transparent; border-color: white;">
          <button class="btn search-button" type="submit" onclick="this.blur();" style="display: block; box-sizing: border-box; width:100%;">
            <i class="fa fa-2x fa-search"></i>
         </button>
       </span>
    </div>
   </ul>

Answer 1

您不应将块元素放在内联元素（span）中。它反对HTML规范。我希望你在单独的文件中使用css，这只是一个例子;）

对于你的问题，如果你坚持要这样做，你是否尝试过叠加或重要的东西？我的第一个想法是，问题应该在你的字体类中（fa fa-2x fa-search）。