• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

unbekannte Abstände, die hartnäckig bleiben

V

vsenol

Mitglied
Hallo Leute, ich finde nicht heraus wie die Abstände zwischen den li-Elementen zustande kommen.



<!DOCTYPE html>
<meta charset="UTF-8">
<title>Inheritance</title>

<style>
* {
margin: 0;
padding: 0;
}

html {
font: 75% verdana;
}

body {
border: 1px solid grey;
padding: 10px;
background: red;
box-sizing: border-box;
}

div {
width: 50em;
height: 50px;
margin: 1.5em auto;
background: lightblue;
border: 2px solid #222;
}

ul {
background: orange;
height: 100%;
line-height: 50px;
text-align: center;
vertical-align: middle;
}
li {
display: inline-block;
background: lightgreen;
height: 50px;
width: 25%;
margin: 0;
}
</style>



<div>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>


Ich bin an einem Projekt dran, wo mich dieses Problem grad fertig macht, ich hatte zwar über Floats das Menü schon so wie ich wollte, aber ich musste es umstellen, weil es sich nicht ins Layout integrieren ließ.

Vielen Dank im vorraus.
 
deine Antwort hilft mir nicht weiter, ich hatte reingeschrieben, dass ich kein float anwenden möchte, ich habe es glaube ich geschafft
 
mit margin-right:-4px bekommst du die Abstände weg. Oder du greifst im Quelltext ein, aber das ist nicht zu empfehlen.
Code: 
<li>Link 1</li
><li>Link 2</li
><li>Link 3</li
><li>Link 4</li>
Ach und wenn du deine LI-Elemente schon eine Breite vergibst, dann ist float:left sinnvoller.
 
display: inline-block mit negativem margin, display: flex, position: absolute oder float: left.

Ich würde floaten.
 
djehke, eines verstehe ich nicht, wieso sollte ich nicht in den Quelltext eingreifen, ich bin der jenige der diesen erstellt :)
 
Ihm ging es weniger um das rechtlich, eher die Schreibweise der HTML-Tags, die er oben niedergeschrieben hat ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben