CSS: Lewy, środkowy i prawy Wyrównanie tekstu na tej samej linii

Question

Muszę opuścić centrum, & wyrównać w prawo tekst w tej samej linii. Mam następujący tekst:

• Left align: 1/10
• Center: 02:27
• Right Align: 100%

Napisałem następujący kod, który pracuje dla lewego i prawe wyrównanie tekstu, ale nie działa poprawnie dla tekstu środkowego.

HTML

<div id="textbox"> 
<p class="alignleft">1/10</p> 
<p class="aligncenter">02:27</p> 
<p class="alignright">100%</p> 
</div> 
<div style="clear: both;"></div> 

CSS

.alignleft { 
    float: left; 
} 
.aligncenter { 
    float: left; 
} 
.alignright { 
    float: right; 
} 

Answer 1

Spróbuj

AKTUALIZACJA

HTML

<div id="textbox"> 
<p class="alignleft">1/10</p> 
<p class="aligncenter">02:27</p> 
<p class="alignright">100%</p> 
</div> 
<div style="clear: both;"></div>​ 

CSS

.alignleft { 
    float: left; 
    width:33.33333%; 
    text-align:left; 
} 
.aligncenter { 
    float: left; 
    width:33.33333%; 
    text-align:center; 
} 
.alignright { 
float: left; 
width:33.33333%; 
text-align:right; 
}​ 

Demo kod tutaj: http://jsfiddle.net/wSd32/1/ Nadzieja to pomaga!

Answer 2

Może to działa:

p{width:33%;float:left;} 
.alignleft{text-align:left;} 
.aligncenter {text-align:center;} 
.alignright {text-align:right;} 

Answer 3

Wariacją doskonałego rozwiązania JCBiggar jest pominięcie szerokości i wyrównania tekstu dla .alignright, ale po prostu w celu unoszenia go w prawo. Zaletą tego jest to, że usuwa obawy, że wewnętrzne elementy mają ustawione marginesy lub podpory, co powoduje, że 33,33% * 3 przekracza 100% szerokości elementu zawierającego. Żądane położenie .alignright może być znacznie prostsze.

CSS będzie wówczas:

.alignleft { 
    float: left; 
    width:33.33333%; 
    text-align:left; 
    padding-left: 10px; 
} 
.aligncenter { 
    float: left; 
    width:33.33333%; 
    text-align:center; 
} 
.alignright { 
    float: right; 
    padding-right: 10px; 
}​ 

Ten pracował dobrze dla mnie, gdy miałem elementy wymagające Podkładka ustalonych ilościach (i nie mogą być reprezentowane w procentach) - jak pokazano powyżej w CSS.

Answer 4

Magia HTML5 sposób, który działa responsywność jest użycie Flex:

<div id="textbox"> 
<p class="alignleft">1/10</p> 
<p class="aligncenter">02:27</p> 
<p class="alignright">100%</p> 
</div> 
<div style="clear: both;"></div> 

CSS

#textbox { 
    display: flex; 
    justify-content: space-between; 
} 

Demo:

http://jsfiddle.net/sep4kf6a/1/

Znajdziesz go unika niewygodne Zawijanie w skrzynkach, które pojawia się przy pływaniach na małym ekranie.

Answer 5

A teraz świeże, zupełnie inne podejście.

.same-line { 
 
    height: 10px; /*childrens it's all absolute position, so must set height*/ 
 
    position: relative; 
 
} 
 
.same-line div{ 
 
    display: inline-block; 
 
    position: absolute; 
 
} 
 
.on-the-left{ 
 
left:0px; 
 
} 
 
.on-the-center{ 
 
    left: 0%; 
 
    right: 0%; 
 
    text-align: center; 
 
} 
 
.on-the-right{ 
 
    right: 0px; 
 
}

<div class="same-line"> 
 
    <div class="on-the-left" >it's Left</div> 
 
    <div class="on-the-center" >this Centrer bla bla bla</div> 
 
    <div class="on-the-right" >it's Right</div> 
 
    </div>