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

112

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

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

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.

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