Как выравнивать текст влево и вправо прямо в одной строке?

Я использую 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> .........

источник

2014-11-12 Ricardo

Я не уверен, что вы еще хотите. Не могли бы вы предоставить лучший пример, пожалуйста? – CrazyPaste

Это не похоже на код для выпадающего списка. Опубликуйте свой полный раскрывающийся код. Кроме того, зачем использовать pull-right и встроенный стиль float: правильно? – Macsupport

У меня есть выпадающая часть, работающая, но у меня проблема с выравниванием этих двух тигров. – Ricardo

Если вы хотите выровнять правую стрелку внутри, то этот элемент должен быть достаточно ширины. Если стиль отображения элементов равен inline (по умолчанию для метки a), вы не можете выровнять что-либо внутри. . если вы будете добавлять display: block к вашему a тегу или display: inline-block; width: 100% Othervise вашего 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>

источник

2014-11-12 17:21:57

Спасибо за помощь, это прекрасно работает :) – Ricardo

Что дисплей свойство Ваших анкеры установлены значению? Попробуйте настроить a.expander для отображения: inline-block и дать ему ширину. Это должно поплавать вашим символом шеврона вправо.

Кроме того, нет необходимости встроить стиль в поплавок: правильно, так как это то, что делает bootstrap pull-right. (избыточный CSS).

Надеюсь, что это поможет!

источник

2014-11-12 17:22:54 Joe

Как выравнивать текст влево и вправо прямо в одной строке?

ответ

Смежные вопросы