尝试将glyphicon与<a> element</a>对齐

Question

我希望我的glyphicon排在我的标签旁边。但看起来它被放置在它下面。 如何放置glyphicon以使其出现在我的元素旁边？ 这是我的HTML和它看起来像的图像

＆＃13;

＆＃13;

<div class="col-md-3 submenucol1 text-right">
  <ul id="managelinks" class="nav nav-stacked">
    <li id="overviewlink"><a href="#overviewlink">Overview</a><span class="glyphicon glyphicon-ok" aria-hidden="false"></span>
    </li>
    <li id="detailslink"><a href="#detailslink">Details</a>
    </li>
    <li id="calendarlink"><a href="#calendarlink">Calendar</a>
    </li>
    <li id="imageslink"><a href="#imageslink">Images</a>
    </li>
    <li id="listinglink"><a href="#listinglink">Listing</a>
    </li>
    <li id="addresslink"><a href="#addresslink">Address</a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你能将glyphicon span放在一个标签内吗？

<li id="overviewlink"><a href="#overviewlink">Overview <span class="glyphicon glyphicon-ok" aria-hidden="false"></span></a></li>

Answer 2

尝试使用col-md-4作为div，如果它不能帮助手动增加 li 的宽度。

Answer 3

只需制作主播链接display:inline-block。

JSfiddle Demo

#managelinks a {
  display: inline-block;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-3 submenucol1 text-right">
  <ul id="managelinks" class="nav nav-stacked">
    <li id="overviewlink"><a href="#overviewlink">Overview</a><span class="glyphicon glyphicon-ok" aria-hidden="false"></span>
    </li>
    <li id="detailslink"><a href="#detailslink">Details</a><span class="glyphicon glyphicon-ok" aria-hidden="false"></span>
    </li>
    <li id="calendarlink"><a href="#calendarlink">Calendar</a><span class="glyphicon glyphicon-ok" aria-hidden="false"></span>
    </li>
    <li id="imageslink"><a href="#imageslink">Images</a><span class="glyphicon glyphicon-ok" aria-hidden="false"></span>
    </li>
    <li id="listinglink"><a href="#listinglink">Listing</a><span class="glyphicon glyphicon-ok" aria-hidden="false"></span>
    </li>
    <li id="addresslink"><a href="#addresslink">Address</a><span class="glyphicon glyphicon-ok" aria-hidden="false"></span>
    </li>
  </ul>
</div>

Answer 4

我也有同样的问题。我使用<i>代码，而这些代码往往效果很好。 Span有时可以添加padding

<i class="glyphicon glyphicon-ok" aria-hidden="false"></i>