Hoe de kogels horizontaal naar links uitlijnen bij het verwijderen van opvulling van de ul?

Ik heb de volgende code:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">


Get ready.

  • This
  • is
  • not
  • a
  • list.
</div> </div>

Ik wil graag de linker padding van de ul verwijderen, zodat de kogels horizontaal zijn uitgelijnd met de tekst die vóór de ul komt. Helaas, wanneer ik de linker padding van de ul naar 0px instel, wordt de inhoud van de li's uitgelijnd met wat er boven staat, en de kogels steken naar links uit. Ik zou de padding van de ul handmatig kunnen instellen op een waarde die werkt in mijn huidige browser, maar ik ben bang dat deze niet in alle browsers werkt.

0
list-style-position: inside;
toegevoegd de auteur Temani Afif, de bron
list-style-position: inside;
toegevoegd de auteur Temani Afif, de bron
Ik ben op zoek naar het duplicaat, ik ben er vrij zeker van dat ik er eerder een zag.
toegevoegd de auteur Temani Afif, de bron
Ik ben op zoek naar het duplicaat, ik ben er vrij zeker van dat ik er eerder een zag.
toegevoegd de auteur Temani Afif, de bron
Bedankt @TemaniAfif, dit loste mijn probleem op. Als je een kort antwoord wilt schrijven, accepteer ik het.
toegevoegd de auteur GuitarExtended, de bron
kun je ons je verwachte resultaat laten zien.
toegevoegd de auteur user123, de bron

6 antwoord

Ik hoop dat ik bereik wat je nodig hebt.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

ul{
padding: 0;
}
ul li{
  display: inline;
}

Get ready.

  • This
  • is
  • not
  • a
  • list.
</div> </div>

3
toegevoegd

Ik hoop dat ik bereik wat je nodig hebt.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

ul{
padding: 0;
}
ul li{
  display: inline;
}

Get ready.

  • This
  • is
  • not
  • a
  • list.
</div> </div>

3
toegevoegd
ul li{
    display: inline-block;
    padding: 20px
}

dit zou het moeten doen.

3
toegevoegd
je kunt de opvulwaarde veranderen zoals je wilt ...
toegevoegd de auteur DES PRO, de bron

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">


Get ready.

  • This
  • is
  • not
  • a
  • list.
</div>
</div> </div>

3
toegevoegd
ik hoop dat dit helpt!
toegevoegd de auteur alias-3, de bron

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">


Get ready.

  • This
  • is
  • not
  • a
  • list.
</div>
</div> </div>

3
toegevoegd
ik hoop dat dit helpt!
toegevoegd de auteur alias-3, de bron

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

ul {
  padding-left: 0;
  display: flex;
  list-style-position: inside;
}

ul li {
  margin-right: 30px;
}

Get ready.

  • This
  • is
  • not
  • a
  • list.
</div> </div>

2
toegevoegd