Inline-block poziome menu

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

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:

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>

Pobawić się z minusowym marginesami
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

odpowiedź 29 marca 2017 przez mbabane Szeryf (79,280 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,280 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.