Jak symulować \ hfill z HTML i CSS?

Rozważmy prosty strona internetowa jak ten:Jak symulować hfill z HTML i CSS?

<!DOCTYPE html> 
<html><head><title>Test!</title></head> 
<body> 
<p>a b c</p> 
</body></html>

Chciałbym mieć a b c sformatowane tak, jakbym napisał a\hfill b\hfill c w TeX. Jest to: a po lewej stronie, a następnie środkowej, a następnie prawej; wszystko w tej samej linii. Jak mogę to zrobić?

Źródło

2013-02-17 fuz

Czy jesteś pewien, że nie mylisz się w lewo i prawo? –

Tak, często mylę reft i światło. – fuz

Czy dopuszczalne jest tworzenie innych znaczników wewnątrz 'p'? –

Sposób, w jaki to zrobisz, zależy w dużej mierze od tego, jak chcesz zachować odstęp, gdy zawartość jest w tym miejscu. Te techniki będą działały z dowolnymi tagami, wybrałem tu listę dla uproszczenia. Jeśli używasz p i span, wymień ul na ul z p i z span.

Wszystkie 3 z tych technik działają bez modyfikowania zamówienia źródłowego. Floats może wykonać zadanie, ale trzeba by wstawić c przed b, aby działał poprawnie.

Technika ta wykorzystuje flexbox i zakłada, że elementy zawierające a, b oraz c są na tyle duże, aby je zawierać, a przestrzeń między nimi jest równa (jeśli jest większa niż B, to B nie będzie wyśrodkowany). Flexbox ma wiele opcji określających zachowanie związane z zawijaniem, ale domyślnie nie jest w ogóle zawijany.

http://jsfiddle.net/4g8NY/1/ prefiksy (brak w zestawie)

ul { 
    display: flex; 
    justify-content: space-between; 
}

schematu flexbox nie posiada bardzo szerokie poparcie w tej chwili, ze względu na fakt, że IE10 jest pierwsza wersja IE go wspierać. http://caniuse.com/#search=flexbox

Można użyć rodzinę display: table wraz z tekstem wyrównanie dać złudzenie, że elementy są rozmieszczone w pożądany sposób, ale ich pojemniki zajmują 33% szerokości rodzica. W tym przykładzie b powinno pozostać idealnie wyśrodkowane, niezależnie od rzeczywistej zawartości. Twoje elementy mają równą wysokość i będą zmuszone pojawiać się na tej samej linii bez względu na wszystko.

W przeciwieństwie do innych technik zakłada się, że będą tylko 3 elementy. Będziesz musiał zmodyfikować szerokości kolumn i majstrować, które kolumny powinny mieć wyrównanie przy każdym dodaniu elementu.

http://jsfiddle.net/4g8NY/2/

ul { 
    display: table; 
    width: 100%; 
} 

li { 
    display: table-cell; 
    width: 33%; 
} 

li:nth-child(2) { 
    text-align: center; 
} 

li:last-child { 
    text-align: right; 
}

Pomoc dla tej techniki jest bardzo dobra, ponieważ wszystkie nasze właściwości są dostępne w IE8 (IE8 jest moim oficjalnym odcięcia, IE7 i starsze nie są uważane za „wsparcie przeglądarek”).

Trzecia technika polega na użyciu pseudo elementu jako ostatniej linii elementu nadrzędnego, abyśmy mogli uzasadnić a, b i c. Nie ma sposobu, aby zapobiec owijaniu tą techniką, jeśli elementy nie mieszczą się na tej samej linii.

W przeciwieństwie do innych technik, dodatkowy znacznik nie jest konieczny. Może to być po prostu znacznik p, taki jaki już masz w przykładowym kodzie.

http://jsfiddle.net/4g8NY/3/

ul { 
    text-align: justify; 
} 

ul:after { 
    content: " "; 
    display: inline-block; 
    width: 100%; 
} 

li { 
    display: inline; /* if you're using an element that's already `inline` like a span, you don't need this */ 
}

podobne do powyższej techniki, działa w IE8 lub lepiej.

Źródło

2013-02-17 14:03:39 cimmanon

Jak symulować \ hfill z HTML i CSS?

Odpowiedz

Powiązane problemy