Mam kilka takich samych elementów HTML idących jeden po drugim:
<span>1</span>
<span>2</span>
<span>3</span>
Szukam najlepszego sposobu na dodanie przestrzeni MIĘDZY elementami używając tylko CSS
[no space] [1] [space 10px] [2] [space 10px] [3] [no space]
Do tego:
- Prosimy o zapisanie zgodności rachunków z przeglądarkami
AKTUALIZACJA
Wygląda na to, że nie było jasne. Nie chcę używać ŻADNEGO DODATKOWEGO ZNACZNIKA HTML, takiego jak
<span></span> <span></span> <span class="last_span"></span>
Nie chcę używać tabel
Chcę, aby pierwszy i ostatni zakres był automatycznie kierowany przez CSS
Nie chcę używać javascript
Wymaganie opcjonalne: ostatni zakres NIE może być OSTATNIM DZIECKIEM tagu nadrzędnego, ale będzie to OSTATNI PASIĘĆ tagu nadrzędnego. Przedziały nie mają między sobą żadnych innych tagów.
text
span
s jest zmienna?span
elementy są generowane przez serwis WWW nie mam dostępu. Więc nie mogę zmienić znaczników. Jednak mogę w pełni korzystać z CSSOdpowiedzi:
Oto dobry sposób:
Każdy
span
poprzedzony aspan
( a więc każdyspan
oprócz pierwszego) będzie miałmargin-left: 10px
.Oto bardziej szczegółowa odpowiedź na podobne pytanie: Separatory między elementami bez hacków
źródło
.sidebar-img + .sidebar-text { margin-left: 40px; }
Po prostu użyj marginesu lub dopełnienia.
W twoim konkretnym przypadku możesz użyć
margin:0 10px
tylko 2<span>
.AKTUALIZACJA
Oto fajne rozwiązanie CSS3 ( jsFiddle ):
Zaawansowany wybór elementu z użyciem selektorów podoba
:nth-child()
,:last-child
,:first-of-type
itd jest obsługiwany od Internet Explorer 9.źródło
span
ręcznego określania ostatniego ? Powinno to być zadaniem CSSspan
s idiv
s (które są elementami blokowymi). Twoje rozwiązanie i tak jest poprawne, jeśli zdefiniujeszdiv
s jako elementy wbudowane ...dodaj te reguły do kontenera nadrzędnego:
Dobre odniesienie: https://cssreference.io/
Zgodność z przeglądarkami: https://gridbyexample.com/browsers/
źródło
grid-auto-columns="max-content"
może być również przydatne. Sprawi, że rozmiar elementu siatki będzie pasował do zawartości. Ponadto kompatybilność przeglądarek nie powinna już stanowić problemu: caniuse.com/#feat=css-gridTo takie proste.
Możesz stylizować elementy z wykluczeniem pierwszego, tylko w jednej linii kodu:
i gotowe, bez manipulacji klasami.
źródło
span.Showing ~ span.Showing
zamiast tego potrzebujęspan.Showing + span.Showing
.~
to ogólny selektor rodzeństwa, w którym nie trzeba bezpośrednio podążać za drugim.Możesz wykorzystać fakt, że
span
jest to element inlineJednak to rozwiązanie nie zadziała, jeśli masz więcej niż jedno słowo tekstu w swoim zakresie
źródło
źródło
Możesz napisać tak:
źródło
<span>
jest elementem liniowym, więc nie można robić na nich odstępów bez ustawiania poziomu blokowego. Spróbuj tegoPoziomy
Pionowy
Kompatybilny ze wszystkimi przeglądarkami.
źródło
Powinieneś zawinąć swoje elementy w kontener, a następnie użyć nowych funkcji CSS3, takich jak siatka css , darmowy kurs , a następnie użyj
grid-gap:value
tego, który został stworzony dla twojego konkretnego problemuźródło
Lub zamiast ustawiać margines i zamiast go zastępować, możesz po prostu ustawić go poprawnie od razu za pomocą następującej kombinacji:
źródło
:first-of-type
i:last-of-type
selektory CSS.not
obsługę przeglądarki Expressionsźródło
Jeśli chcesz wyrównać różne elementy i chcesz mieć taki sam margines ze wszystkich stron, możesz użyć następującego. Każdy element
container
, niezależnie od typu, otrzyma taki sam margines otaczający.Jeśli chcesz wyrównać elementy w rzędzie, ale pierwszy element dotyka skrajnej lewej krawędzi
container
, a wszystkie pozostałe elementy są równomiernie rozmieszczone, możesz użyć tego:źródło