텍스트를 왼쪽과 오른쪽으로 같은 줄에 어떻게 정렬합니까?

작은 프로젝트를 수행하기 위해 부트 스트랩을 사용하여 드롭 다운을 수행하고 화살표를 사용하여 아래에 무언가가 있음을 보여 주려고했지만 텍스트에 왼쪽과 오른쪽 화살표를 맞추려고 할 때 문제가 발생했습니다.텍스트를 왼쪽과 오른쪽으로 같은 줄에 어떻게 정렬합니까?

그것은 다음과 같이 만들 수있는 방법이이이

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

이것은 드롭 다운 코드처럼 보이지 않습니다. 전체 드롭 다운 코드를 게시하십시오. 또한 플로트의 오른쪽 및 인라인 스타일을 사용하는 이유는 무엇입니까? 맞습니까? – Macsupport

드롭 다운 파트가 작동하지만이 두 thigs의 정렬 문제가 있습니다 – Ricardo

오른쪽 요소를이 요소보다 오른쪽으로 정렬하려면이 너비가 충분해야합니다. 요소 표시 스타일이 inline (기본값은 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 태그 또는 a Othervise display: inline-block; width: 100% 에 display: block를 추가한다면? a.expander가 인라인 블록을 표시하도록 설정하고 폭을 지정하십시오. 그것은 쉐브론 글립 문자를 오른쪽으로 띄워야합니다.

또한 float : inline 스타일로 인라인 스타일을 지정할 필요가 없습니다. 그게 바로 부트 스트랩 풀다운 기능입니다. (중복 CSS).

희망 하시겠습니까?

출처

2014-11-12 17:22:54 Joe

텍스트를 왼쪽과 오른쪽으로 같은 줄에 어떻게 정렬합니까?

답변

관련 문제