CSS set li inspringing

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 ulvervolgkeuzemenu 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 lis en (indien van toepassing) de as (of welke inhoudselementen je ook hebt) laten inspringen, elk met verschillende effecten.
Je kunt ook padding-leftgebruiken in plaats van margin-left, afhankelijk van het gewenste effect.

Bijwerken

Standaard gebruiken veel browsers padding-leftom de eerste inspringing in te stellen. Als je daar vanaf wilt, stel dan padding-left: 0px;

in

Toch hebben zowel de instellingen voor margin-leftals padding-leftop verschillende manieren invloed op het inspringen van lijsten. Specifiek:margin-leftheeft invloed op de inspringing aan de buitenkant van de rand van het element, terwijl padding-leftde 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-leftbepaalt de inspringing van ulen niet margin-left.

Vergelijk: hier stel je padding-leftin 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;
}

Other episodes