如何将文本左对齐和图像右对齐在同一行？答案

【问题标题】：How do I align text left and image right on the same line?如何将文本左对齐和图像右对齐在同一行？
【发布时间】：2015-01-09 15:17:38
【问题描述】：

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

可以将文本左对齐和图像右对齐这就是现在的样子

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> .........

【问题讨论】：

我不确定你还想要什么。请你提供一个更好的例子吗？
这看起来不像是下拉菜单的代码。发布您的完整下拉代码。另外，为什么要使用 float:right 的 pull-right 和内联样式？
我的下拉部分正常工作，但是这两个东西的对齐有问题

标签： css html twitter-bootstrap text-alignment

【解决方案1】：

您的锚点设置为什么显示属性？尝试将 a.expander 设置为 display: inline-block，并给它一个宽度。那应该将您的人字形字形浮动到右侧。

另外，不需要使用 float: right 对其进行内联样式，因为这就是 bootstrap pull-right 所做的。（冗余 CSS）。

希望对您有所帮助！

【讨论】：

【解决方案2】：

如果要在元素内对齐右箭头，则该元素必须足够宽。如果元素显示样式为inline（a 标签的默认值），则无法对齐内部的任何内容。例如。如果您将display: block 添加到您的a 标签或display: inline-block; width: 100% 否则你的a 不会占用父元素的全宽

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

【讨论】：