• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Inline-block poziome menu

Aruba Cloud - Virtual Private Server VPS
+1 głos
2,275 wizyt
pytanie zadane 29 marca 2017 w HTML i CSS przez Dynamic Bywalec (2,910 p.)

Po zrobieniu poziomego menu pojawia się biały znak między opcjami kiedy najadę na białą pionową kreskę to pojawia się kursor do zaznaczania tekstu:

CSS:

nav
{
	text-align: center;
	background-color: #1c74b2;
}

.menu
{
	list-style-type: none;
	margin: 0;
	font-size: 18px;
}

.menu > li
{
	display: inline-block;
	padding: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}

HTML:

    <body>
       <header>
           <h1 class="logo">Jakies Blog</h1>
		   <nav>
				<ul class="menu">
					<li><a href="#">Str Gówna</a></li>
					<li><a href="#">O mnie</a></li>
					<li><a href="#">Moje prace</a></li>
					<li><a href="#">Kontakt</a></li>
					<li><a href="#">Cos tam</a></li>
				</ul>
		   </nav>
       </header> 
    </body>

 

2 odpowiedzi

+3 głosów
odpowiedź 29 marca 2017 przez niezalogowany

Elementy traktowane są jako inline. Co za tym idzie? Entery między poszczególnymi <li> zamieniane są na spacje - stąd ta przerwy.

Rozwiązanie:

  1. Pozbyć się białych znaków pomiędzy <li>, na przykład tak:
    <li><a href="#">Str Gwna</a></li
    ><li><a href="#">Str Gwna</a></li 
    ><li><a href="#">O mnie</a></li>
    
  2. Pobawić się z minusowym marginesami

  3. Użyć float, a najlepiej flex

komentarz 30 marca 2017 przez Dynamic Bywalec (2,910 p.)
do czego ten float?
komentarz 30 marca 2017 przez niezalogowany

a najlepiej flex

komentarz 30 marca 2017 przez Dynamic Bywalec (2,910 p.)
do czego ?
komentarz 30 marca 2017 przez niezalogowany

usuń display: inline-block z li, dodaj display: flex do .menu

komentarz 30 marca 2017 przez Dynamic Bywalec (2,910 p.)
dałem inline-flex do .menu i jest na środku. ale możesz mi wyjaśnić dlaczego tak?
komentarz 30 marca 2017 przez niezalogowany
Nie rozumiem pytania
0 głosów
odpowiedź 29 marca 2017 przez mbabane Szeryf (79,260 p.)
Nic nie zmieniane:
https://codepen.io/anon/pen/evPxwL

Moze w jakims innym miejscu w css masz cos niepozadanego (bo zdaje sie ze podales tylko fragment), ewentualnie wyczysc przegladarke, moze ma zapisana jakas stara wersje css'a.
komentarz 30 marca 2017 przez Dynamic Bywalec (2,910 p.)
Nic z tego :>
komentarz 30 marca 2017 przez mbabane Szeryf (79,260 p.)

Czy chodzi Ci o to, ze jak sie zaznaczy, w taki sposob jakby sie chcialo skopiowac tekst to wystepuja te spacje? Jezeli tak, to, to jest zdaje sie wada metody inline-block. Jak sobie z tym poradzic bardzo dobrze opisal to Argeento.

komentarz 30 marca 2017 przez Dynamic Bywalec (2,910 p.)
była jeszcze jedna metod której nie pamiętam

Podobne pytania

0 głosów
3 odpowiedzi 1,405 wizyt
pytanie zadane 23 lutego 2017 w HTML i CSS przez Karol Loczeski Użytkownik (820 p.)
0 głosów
1 odpowiedź 143 wizyt
0 głosów
1 odpowiedź 740 wizyt
pytanie zadane 2 stycznia 2019 w HTML i CSS przez Strugaczka Początkujący (260 p.)

93,334 zapytań

142,328 odpowiedzi

322,406 komentarzy

62,670 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...