链接按钮和引导字形图标样式问题答案

【问题标题】：Link button and Bootstrap glyphicons styling issue链接按钮和引导字形图标样式问题
【发布时间】：2016-10-28 07:58:05
【问题描述】：

我遇到的问题是，当我在下拉菜单中使用 LinkButton 时，图标和 LinkButton 文本显示在单独的两行中。

HTML

<ul class="nav navbar-nav navbar-right">
  <li>
    <a data-toggle="dropdown" class="dropdown-toggle text-white" href="#">Hi,
      <asp:Label ID="lbllname" runat="server" Text=""></asp:Label>
      <b class="caret"></b>
    </a>
    <ul style="margin: 25px 15px 0 0;" role="menu" class="dropdown-setting dropdown-menu bg-amber">
      <li>
        <a href="#">
          <span class="entypo-user"></span>&nbsp;&nbsp;My Profile</a>
      </li>
      <li>
        <a href="#">
          <span class="entypo-vcard"></span>&nbsp;&nbsp;Account Setting</a>
      </li>
      <li>
        <a href="#">
          <span class="entypo-lifebuoy"></span>&nbsp;&nbsp;Help</a>
      </li>
      <li>
        <a href="#">
          <span class="icon-upload"></span>&nbsp;&nbsp;
          <asp:LinkButton ID="btnlogout" OnClick="btnlogout_Click" runat="server">Log out</asp:LinkButton></a>
      </li>
    </ul>
  </li>
</ul>

如下所示在浏览器中呈现的链接按钮

<li>
<a href="#">
<span class="icon-upload"></span>&nbsp;&nbsp;
</a><a id="btnlogout" href="javascript:__doPostBack('ctl00$btnlogout','')">Log out</a>
</li>

【问题讨论】：

标签： html css asp.net twitter-bootstrap

【解决方案1】：

只需将此作为 CSS 修复：

.navbar-right li {white-space: nowrap;}

这是由于您对&nbsp;的使用不当造成的，可以通过使用nowrap强制浏览器将文本呈现在一行中来解决。

另一个问题是您有一个嵌套的<a> 标记。这不应该发生。请以这种方式更改标记：

<asp:LinkButton ID="btnlogout" OnClick="btnlogout_Click" runat="server">
    <span class="icon-upload"></span> Log out
</asp:LinkButton>

【讨论】：

运气不好，我什至删除了没有任何变化
@Ayman 抱歉，我只是稍微更改了 CSS。从中删除a。现在检查？
Np，我还有这个问题
@Ayman 检查 LI，用 HTML 截取右侧所有样式的完整检查屏幕。同时更新渲染的 HTML。
知道了。你不应该有包装<a>。