Jak ustawić odstęp w pionie między elementami listy?

115

W <ul>elemencie wyraźnie pionowe odstępy między wierszami można sformatować za pomocą atrybutu wysokości wiersza.

Moje pytanie brzmi: <ul>jak ustawić odstępy pionowe między elementami listy w elemencie?

html css html-lists Brice Coustillas
źródło
1
ul li { margin: ???; padding: ???; line-height: ???; }wszystkie lub niektóre z tych atrybutów CSS.
Brad Christie

Odpowiedzi:

112

Możesz użyć marginesu. Zobacz przykład:

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

źródło
w szczególności użyj marginesów na lielementach, a nie na ulelemencie.
duanev
41

HTML

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS

li:not(:last-child) {
    margin-bottom: 5px;
}

EDYCJA: Jeśli nie użyjesz specjalnego przypadku dla ostatniego elementu li, twoja lista będzie miała potem małe odstępy, które możesz zobaczyć tutaj: http://jsfiddle.net/wQYw7/

Teraz porównaj to z moim rozwiązaniem: http://jsfiddle.net/wQYw7/1/

Oczywiście to nie działa w starszych przeglądarkach, ale możesz łatwo użyć rozszerzeń js, które umożliwią to w starszych przeglądarkach.


źródło
1
@Layne Częścią naszej pracy jako programistów / programistów internetowych jest dostarczanie rozwiązań, które będą działać w jak największej liczbie środowisk. Twoja odpowiedź jest naprawdę przesada jak na zadane pytanie.
disinfor
1
Nie sądzę. Zapewniasz rozwiązanie tylko dla środowiska, na które chcesz kierować, wszystko inne byłoby przesadą, chyba że planujesz się rozwijać. Ponadto wszystkie odpowiedzi mają tę wadę, że dodaje spację przed i / lub po pierwszym / ostatnim elemencie listy. Nie o to chodziło, chciał mieć tylko odstępy MIĘDZY elementami listy (przynajmniej je napisał). Ostatni element w innych odpowiedziach będzie miał później odstępy, chociaż nie ma kolejnych elementów li.
Środowisko, w którym pracuje, to przeglądarki internetowe. Proponowanie rozwiązania, które działa wszędzie, nie jest przesadą. Dodatkowo, jeśli naprawdę martwisz się o margines ostatniej pozycji, nie sugerowałbyś rozwiązania, które wymagałoby poprawki js. Mógłbyś użyć :first-childi zadziałałoby we wszystkim IE7 +
disinfor
4
@disinfor Nie zgadzam się co do kierowania wszystkiego. Część stresu związanego z tworzeniem stron internetowych wiąże się z obsługą przeglądarek, które nas nie obsługują. Safari jest jednym z nich. Musimy stawić czoła przeglądarkom, które powstrzymują Internet, medium.com/@richtr/… . Nasze strony internetowe powinny przywracać powiadomienia „Nie obsługujemy Twojej przeglądarki”, a nie piekło, aby działała wszędzie. Musimy również informować i przeciwstawiać się klientom. Albo nie możemy nic zrobić i być niesamowitymi dywanikami podłogowymi.
1,21 gigawata
@ 1.21gigawatts "Nasze strony internetowe powinny przywrócić" Nie obsługujemy twojej przeglądarki "" mhm, nie. Nazywa się to sabotażem konkurencji i jest nielegalne w wielu krajach. Microsoft zrobił to ze Skype w przeglądarce. Skype dla sieci nadal działa doskonale w innych przeglądarkach. Google spowodowało awarię YouTube w Safari przez ponad rok. Google blokuje użytkownikom Tor'a korzystanie z niektórych usług. Czy celem „platformy internetowej” nie jest uczynienie aplikacji i usług niezależnymi od platformy, tak jak nie blokowanie określonych platform? Jeśli chcesz to zrobić, dlaczego nie stworzyć zamiast tego programów natywnych? W końcu są potężniejsze.
Andreas
35

Skłoniłbym się do tego, co ma zaletę obsługi IE8.

li{
    margin-top: 10px;
    border:1px solid grey;
}

li:first-child {
    margin-top:0;
}

JSFiddle

Paulie_D
źródło
27

Dodaj margindo swoich litagów. Spowoduje to utworzenie przestrzeni między lii, której możesz użyć line-heightdo ustawienia odstępów w tekście w litagach.

disinfor
źródło
3

Często podczas tworzenia wiadomości e-mail w formacie HTML nie można używać arkuszy stylów ani bloków stylów / stylów. Wszystkie CSS muszą być wbudowane. W przypadku, gdy chcesz dostosować odstępy między punktorami, używam li style = "margin-bottom: 8px;" w każdej pozycji punktora. Dostosuj wartość pikseli do swoich upodobań.

Malcolm Stone
źródło
Ponadto tagi typu style / style są przestarzałe
Ben Slade
2

Aby zastosować do całej listy, użyj

ul.space_list li { margin-bottom: 1em; }

Następnie w html:

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>
Tom Bartenstein
źródło
0

ustawienie padding-bottom dla każdej listy za pomocą pseudoklasy jest realną metodą. Można również użyć wysokości linii. Pamiętaj, że właściwości czcionek, takie jak rodzina czcionek, grubość czcionki itp., Odgrywają rolę w przypadku nierównych wysokości.

Rishi jung
źródło
2
Czy możesz podać przykład swojego rozwiązania?
Muldec
-9

<br>między <li></li>wierszami wydaje się działać doskonale we wszystkich przeglądarkach internetowych, które próbowałem, ale nie przechodzi on-line kontrolera W3C CSS3. Daje mi dokładnie takie odstępy między wierszami, których szukam. Jeśli o mnie chodzi, ponieważ niewątpliwie działa, upieram się w używaniu go, cokolwiek mówi W3C, dopóki ktoś nie wymyśli dobrej alternatywy prawnej.

Melvyn Owen
źródło
Twoja sugestia działa dobrze, jeśli jesteś zadowolony z aktualnej wysokości linii, ale myślę, że chce określić własną ilość miejsca. Używając znaków końca linii, po prostu utwórz nowe linie, używając bieżącej wysokości linii.
1,21 gigawata
Jeśli powtarzasz listę zawierającą wiele elementów, dodawanie br jest okropną praktyką. Znaczniki to najbezpieczniejszy i najprostszy sposób dodawania spacji, jak sugerują powyższe odpowiedzi.
SeaWarrior404