@Html.Textbox与glyphicon之间存在间距问题求助

嗨，我之前也碰到过这个问题！这种恼人的间距通常是HTML元素默认的排版规则或者代码里的换行/空格导致的，给你几个靠谱的解决办法：

• 消除HTML渲染后的空白字符
  Razor解析后，如果@Html.TextBox和glyphicon标签之间有换行、空格，浏览器会把这些解析成空白间距。你可以把两个元素写在同一行，或者用注释去掉中间的空白：

  @Html.TextBox("MyTextBox", null, new { @class = "form-control" })@* 去掉中间的空格换行 *@<span class="glyphicon glyphicon-search"></span>
  

• 用CSS直接调整间距
  给glyphicon设置负margin，或者通过父容器消除空白：

  /* 给图标设置负左margin，贴近文本框 */
  .icon-close-to-input {
      margin-left: -22px;
      pointer-events: none; /* 避免图标干扰文本框输入 */
  }
  
  /* 另一种思路：父容器设字体大小为0消除空白，子元素恢复字体 */
  .input-wrapper {
      font-size: 0;
  }
  .input-wrapper input, .input-wrapper .glyphicon {
      font-size: 14px; /* 恢复默认字体大小 */
  }
  

  对应的Razor代码：

  <div class="input-wrapper">
      @Html.TextBox("MyTextBox", null, new { @class = "form-control" })
      <span class="glyphicon glyphicon-search icon-close-to-input"></span>
  </div>
  

• 用Bootstrap输入组组件（如果项目用了Bootstrap）
  这是最省心的办法，Bootstrap自带的input-group组件专门用来组合输入框和图标/按钮，完美适配样式：

  <div class="input-group">
      @Html.TextBox("MyTextBox", null, new { @class = "form-control" })
      <span class="input-group-addon">
          <span class="glyphicon glyphicon-search"></span>
      </span>
  </div>
  

你可以根据自己项目的情况选一个试试，应该能搞定这个小麻烦～

内容的提问来源于stack exchange，提问作者Nearshore