css - 如何在同一行上将文本左对齐和图像右对齐？

Question

我使用 bootstrap 来做一个小元素，我正在尝试做一个下拉菜单并使用箭头来显示下面有东西，但是我在尝试将文本左对齐和箭头右对齐时遇到问题。

可以将文字左对齐，图片右对齐 这是现在的样子

Busines >         |
                  |
                  |

有没有办法让它看起来像这样:

Busines            >  |
                      |
                      |

代码:

<a href="#Business" class="expander">Business <span 
class="glyphicon glyphicon-chevron-right pull-right"
style="float:right; margin-right:3px; font-size:0.7em; "></span></a>

部分菜单代码:

<div class="sidebar-nav">
            <div class="navbar navbar-default" role="navigation">
                  <div class="navbar-header">  
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                      <span class="sr-only">Toggle Navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
                  <span class="visible-xs navbar-brand">Left Navigation</span>
                  </div>
                  <div class="navbar-collapse sidebar-navbar-collapse collapse">  
                    <nav id="leftNav" role="navigation">
                      <ul class="leftnavigation">
                      <li> 
             <a href="#Business" class="expander">Business <span class="glyphicon glyphicon-chevron-right pull-right"> </span></a>
                        <ul id="Business"> 
                          <li><a href="#">Administrative </a></li> .........

Answer 1

您的 anchor 设置为什么显示属性？尝试将 a.expander 设置为显示:内联 block ，并为其指定宽度。那应该使您的人字形字形向右浮动。

此外，无需使用 float: right 对其进行内联样式，因为 Bootstrap pull-right 就是这样做的。 (冗余 CSS)。

希望对您有所帮助!