Googelen en zoeken naar stack-overflow leverde geen resultaten op die ik kon herkennen, dus vergeef me als dit al eerder is gevraagd…
Ik heb een vervolgkeuzemenu dat lijsten als basis gebruikt. Het probleem is dat de lijsten erg breed zijn en niet ver genoeg inspringen als ze worden uitgevouwen. Dit is dus mijn probleem! Hoe maak ik de inspringing op lijsten groter via CSS?
Antwoord 1, autoriteit 100%
gebruik
. om een ul
vervolgkeuzemenu te laten inspringen
/* Main Level */
ul{
margin-left:10px;
}
/* Second Level */
ul ul{
margin-left:15px;
}
/* Third Level */
ul ul ul{
margin-left:20px;
}
/* and so on... */
Je kunt ook de li
s en (indien van toepassing) de a
s (of welke inhoudselementen je ook hebt) laten inspringen, elk met verschillende effecten.
Je kunt ook padding-left
gebruiken in plaats van margin-left
, afhankelijk van het gewenste effect.
Bijwerken
Standaard gebruiken veel browsers padding-left
om de eerste inspringing in te stellen. Als je daar vanaf wilt, stel dan padding-left: 0px;
in
Toch hebben zowel de instellingen voor margin-left
als padding-left
op verschillende manieren invloed op het inspringen van lijsten. Specifiek:margin-left
heeft invloed op de inspringing aan de buitenkant van de rand van het element, terwijl padding-left
de spatiëring aan de binnenkant van de rand van het element beïnvloedt grens. (Lees hier meer over het CSS-boxmodel)
Als u padding-left: 0;
instelt, blijven de opsommingstekens van de li over de rand van de rand van het element hangen (tenminste in Chrome), wat al dan niet is wat u wilt.
Voorbeelden van padding-left vs margin-left en hoe ze kunnen samenwerken op ul: https:/ /jsfiddle.net/daCrosby/bb7kj8cr/1/
Antwoord 2, autoriteit 99%
padding-left
bepaalt de inspringing van ul
en niet margin-left
.
Vergelijk: hier stel je padding-left
in op 0
. Merk op dat alle inspringingen verdwijnen.
ul {
padding-left: 0;
}
<ul>
<li>section a
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
</ul>
<ul>
<li>section b
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
</ul>
Antwoord 3, autoriteit 35%
Probeer ook:
ul {
list-style-position: inside;
}
Antwoord 4, autoriteit 9%
li{
margin-left:50px;
}
of vervang 50px door wat je maar wilt.
Antwoord 5
Ik ontdekte dat het in twee relatief eenvoudige stappen redelijk goed leek te werken. De eerste CSS-definitie voor ul stelt de basisinspringing in die u wilt voor de lijst als geheel. De tweede definitie stelt de inspringwaarde in voor elk genest lijstitem erin. In mijn geval zijn ze hetzelfde, maar je kunt natuurlijk kiezen wat je wilt.
ul {
margin-left: 1.5em;
}
ul > ul {
margin-left: 1.5em;
}