Skocz do zawartości

Wysokość obramowania w CSS pomiędzy tagami <li> w menu


 Udostępnij

Rekomendowane odpowiedzi

Witajcie pomocne duszyczki!

Podczas tworzenia własnej strony napotkałem się na pewien problem, otóż ze względów estetycznych chciałbym uzyskać taki efekt jak na obrazku, mianowicie czy jest możliwość ustalenia długości obramowania CSS? obramowanie na dole jest normalnej długości, a te pomiędzy elementami menu jest skrócone 1/3.

Chodzi mi o te obramowanie pomiędzy Wieści, O nas, Współpraca.

Moglibyście mi pomóc i powiedzieć jaka funkcja za to odpowiada?

image

Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert
8 godzin temu, arces napisał:

 

Moim zdaniem lepszy float niż display: inline-block Ale wiadomo, że teraz rządzi flex ☺️

Co? XDDD

Tutaj nie trzeba używać :before i :after, wystarczy nadać line-height dla li a potem dodać border boczny z pominięciem ostatniego/pierwszego elementu

Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert
9 godzin temu, arces napisał:

Moim zdaniem lepszy float niż display: inline-block Ale wiadomo, że teraz rządzi flex ☺️

Oczywiście, że inline-block jest lepszy. 'Problemem' może być jedynie te 2px przerwy pomiędzy elementami <li>, ale są na to fixy, więc problemu nie ma 

Flex w tym przypadku jest niepotrzebny...

1 godzinę temu, Lord Fenrir napisał:

Tutaj nie trzeba używać :before i :after, wystarczy nadać line-height dla li a potem dodać border boczny z pominięciem ostatniego/pierwszego elementu

Nie trzeba, ale lepiej to rozwiązać z użyciem pseudelementów niż bruździć w stylu dla <li>, co później trzeba nadpisywać.

Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert
38 minut temu, BlackIce napisał:

Flex w tym przypadku jest niepotrzebny...

W tym konkretnym może nie, ale po co się go wystrzegać, jeżeli to najszybszy sposób na zrobienie listy w poziomie? ☺️ Przecież nie obciąży kodu przez to.

39 minut temu, BlackIce napisał:

Oczywiście, że inline-block jest lepszy. 'Problemem' może być jedynie te 2px przerwy pomiędzy elementami <li>, ale są na to fixy, więc problemu nie ma 

Pod jakim względem jest lepszy i czemu tak hejtujesz "float" w porównaniu właśnie do inline-block? Fixy fixami, z float też można fixa użyć i nie ma problemu

Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert

Jest lepszy pod tym względem, że spełnia swoją rolę czyli tworzysz liniowy element blokowy. W większości przypadków gdzie używamy floatow trzeba dodatkowo ustawić diaplay, więc tutaj przy nawigacji floaty to najgorsza dostępna opcja.

@BlackIce skończę śniadanie i wrzucę codepena.

@BlackIce 

Edytowane przez Lord Fenrir
Dodanie codepen'a
Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert
2 godziny temu, arces napisał:

po co się go wystrzegać, jeżeli to najszybszy sposób na zrobienie listy w poziomie?

Nie jest najszybszy.

2 godziny temu, arces napisał:

Pod jakim względem jest lepszy i czemu tak hejtujesz "float" w porównaniu właśnie do inline-block?

Pod takim, że przy użyciu float nie wyśrodkujesz listy w poziomie

Patrz przykład poniżej.

@Lord Fenrir chodziło o taki efekt jak na screenie. Tutaj rozwiązanie:

Odnośnik do komentarza
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

  • Ostatnio przeglądający

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
  • Podobna zawartość

    • Witam. Z racji tego, że pracujemy już nad nowym portfolio to postanowiliśmy udostępnić poprzednie do pobrania
      Strona była pisana na szybko, więc może posiadać lekkie niedociągnięcia - w razie czego prosimy pisać w prywatnej wiadomości - pomożemy naprawić.
      Projekt wykonany został w ciemnych kolorach i jest w pełni responsywny.
      Screen:
      Demo: JSend.pl - Life is programming!
      Download:

      Ukryta zawartość
      Zareaguj na post lub odpowiedz w temacie aby zobaczyć ukrytą zawartość.
    • Hey, szukam godnych polecenia książek do nauki językow wymienionych wyżej, mogą być audiobooki ale nie jakieś strony czy cos w tym stylu, niestety próba uczenia się z stron kończy się u mnie fiaskiem bo wszystko mnie rozprasza dlatego szukam zwykłej książki.
      Ps. Jeśli chodzi o naukę języków to co jest lepsze uczenie się typowo pod strony www czy c++/c jeśli chciałbym wiązać to ze swoją przyszłością zawodową? 
    • Witam. Dzisiaj chciałbym Wam przedstawić pierwsze portfolio jakie wykonałem parę dobrych miesięcy temu... Znalazłem na dysku to udostępniam.
      Od razu zaznaczam, że kod może nie jest doskonały, bo pisałem go już jakiś czas temu a nie mam teraz czasu na poprawki. Źle nie jest i da się tego używać. Jest prosty w edycji dlatego może akurat komuś się przyda!
      Autor: @RandomTalk
      Wykorzystane technologie:
      > HTML > CSS, > LESS, > SASS, > JavaScript > RWD !!>> ZAKAZ USUWANIA STOPKI <<!!
      Podgląd: 

      (w rzeczywistości ten header jest normalny, a nie że tekst ucięty... Nie wiem czemu na fotce tak wyszło)
      Download: 
      Ukryta zawartość
      Zareaguj na post lub odpowiedz w temacie aby zobaczyć ukrytą zawartość.
    • Witam, wie ktoś może jak to naprawić zrobiło sie tak na każdym stylu nawet na domyślnym. Brakuje arkusza CSS

    • Cześć, chciałbym abyście mi polecili jakieś książki, najlepiej coś nowszego związane z html, css + php. Ogólnie to jakieś podstawy znam, ale warto przestudiować wszystko od nowa raz a porządnie, fajnie gdyby były tam biblioteki pdo, mysql, ogólnie wszystko zwięźle i na temat i żeby było w miarę "na czasie"
  • Najnowsze tematy

  • Ostatnio rozwiązane

×