Jak zapobiegać pęknięciom linii w elementach listy za pomocą CSS

W HTML użytkownicy mogą tworzyć listy w kolejności, a także formularze nieuporządkowane. Domyślnie istnieją przerwy między elementami na liście. Czasami jednak możesz wyświetlić dane z listy w jednym wierszu, na przykład wyświetlane na pasku nawigacji. W tym celu programiści są zobowiązani do zapobiegania przerwy między pozycjami listy.

Ten zapis będzie pokazany:

• • Jak stworzyć/utworzyć listę w HTML?
  • Jak zapobiegać pęknięciom linii w elementach listy za pomocą CSS?

Jak stworzyć/utworzyć listę w HTML?

Aby utworzyć listę w HTML, wypróbuj podane instrukcje.

Krok 1: Utwórz pojemnik „Div”

Początkowo stwórz kontener DIV za pomocą „”Tag. Dodaj także „klasa”Atrybut i przydzielić nazwę atrybutu klasowego zgodnie z Twoimi preferencjami.

Krok 2: Zrób listę

Następnie skorzystaj z „

„Tag, aby utworzyć nieorządkowaną listę i wstawić„
• „Tag, aby dodać dane do listy:

  
  

  
  
  • Herbata
  
  
  • Kawa
  
  
  • mleko
  
  
  • sok
  
  
  • Zimny ​​napój
  
  
  • Mennica
  
  

  
  

  
  W rezultacie lista została pomyślnie utworzona:

  Jak zapobiegać pęknięciom linii w elementach listy za pomocą CSS?

  Jeśli chcesz zapobiec/usunąć przerwy linii z elementów listy za pomocą CSS, zastosuj „wyświetlacz„Własność o wartości”Block wbudowany”, Który usuwa przerwy linii w elementach listy.

  Aby uzyskać praktyczną demonstrację, sprawdź podane kroki.

  Krok 1: Style „Div” pojemnik

  Aby stylizować pojemnik, najpierw uzyskać dostęp do klasy, wykorzystując nazwę klasy z selektorem kropkowym jako „.Main-Div". Następnie zastosuj poniżej wyświetlone właściwości CSS:

  .Main-Div
  Border: 3Px stały niebieski;
  Margines: 20px 100px;
  kolor tła: RGB (100, 193, 236);
  

  
  Tutaj:

  • • "granica”Jest wykorzystywany do ustawiania granicy wokół elementu.
    • "margines”Służy do określenia przestrzeni poza granicą.
    • "kolor tła„Przydziela kolor z tyłu elementu.

  Wyjście

  
  Krok 2: Zapobiegaj przerwie linii na liście

  Uzyskaj dostęp do listy za pomocą „

• ”I zastosuj następujące właściwości CSS:

  li
  Wyświetlacz: Block Inline;
  Olflow: ukryty;
  Biała przestrzeń: nowrap;
  Text-Overflow: Elipsis;
  

  
  Według danego fragmentu kodu:

  • • "wyświetlacz„Wartość właściwości jest ustalana jako„Block wbudowany”W celu zapobiegania przerwom linii.
    • "przelewowy”Jest wykorzystywany do określenia, co powinno się stać, jeśli treść wylewa się z pudełka elementu. Ta właściwość określa, czy pobrać tekst, czy dodać paski przewijania, gdy treść tego elementu jest długa, aby ustawić w określonym obszarze.
    • "Biała przestrzeń”Jest wykorzystywany do kontrolowania białej przestrzeni, a pęknięcia linii wewnątrz tekstu są traktowane.
    • "Tekst-przewrócenie”Służy do radzenia sobie z okolicznościami, gdy tekst jest przycięty i przepełniony z pudełka elementu.

  Wyjście

  
  Dowiedziałeś się o metodzie zapobiegania pęknięciom linii w pozycjach listy, wykorzystując właściwości CSS.

  Wniosek

  Aby zapobiec rozbiciu linii w elementach za pomocą CSS, najpierw utwórz listę za pomocą „

  ”Tag i dodaj dane za pomocą„
  • ”Tag. Następnie uzyskaj dostęp do listy i zastosuj „wyświetlacz" nieruchomość. Następnie ustaw wartość „Block wbudowany”, Który usuwa przerwy linii w elementach listy. W tym artykule nauczył cię najłatwiejszą metodę zapobiegania przerwaniu linii w elementach listy za pomocą CSS.