Ik ben nieuw in CSS en werk met lijsten. Ik heb geprobeerd een van de codes te gebruiken die ik op w3schools zag en die laat zien hoe je lijsten kunt laten inspringen:
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Mijn css overschrijft het, zodat het allemaal op dezelfde verticale lijn verschijnt. Is er een CSS-code die ik lokaal in de lijst kan gebruiken om het hoofd-css-bestand te overschrijven? Alle hulp wordt op prijs gesteld.
Antwoord 1, autoriteit 100%
Ja, gebruik gewoon zoiets als:
ul {
padding-left: 10px;
}
En het zal elke opeenvolgende ulmet 10 pixels stoten.
Antwoord 2, autoriteit 50%
Het klinkt alsof sommige van je stijlen opnieuw worden ingesteld.
Standaard hebben in de meeste browsers uls en ols marginen paddingtoegevoegd.
Je kunt dit negeren (en velen doen dat ook) door een regel aan je CSS toe te voegen, zoals zo
ul, ol { //THERE MAY BE OTHER ELEMENTS IN THE LIST
margin:0;
padding:0;
}
In dit geval zou je het element uit deze lijst verwijderen of een margin/paddingterug toevoegen, zoals zo
ul{
margin:1em;
}
Voorbeeld: http://jsfiddle.net/jasonseNaro/vbmbq/1/
Antwoord 3, Autoriteit 36%
Ik heb hetzelfde probleem opgelost door tekstinspringen toe te voegen aan de genestelijst.
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul id="list2">
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
#list2
{
text-indent:50px;
}
Antwoord 4, Autoriteit 11%
U kunt [Aangrenzende Sibling Combinators] gebruiken zoals beschreven in de aanbeveling van het W3 CSS-selectors 1
U kunt dus een +teken (of zelfs een ~tilde gebruiken) een opvulling toepassen op de genest ulTAG, zoals beschreven in uw vraag en je krijgt het resultaat dat je nodig hebt.
Ik denk ook dat wat je wilt om de belangrijkste CSS, lokaal te negeren.
U kunt dit doen:
<style>
li+ul {padding-left: 20px;}
</style>
Op deze manier wordt de binnenste ulgenest, inclusief de kogels van de li-elementen.
Ik wou dat dit nuttig was! =)
Antwoord 5, Autoriteit 11%
U kunt ook HTML gebruiken om de CSS lokaal te negeren. Ik had een soortgelijk probleem en dit werkte voor mij:
<html>
<body>
<h4>A nested List:</h4>
<ul style="PADDING-LEFT: 12px">
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Antwoord 6, autoriteit 7%
Normaal gesproken worden alle lijsten sowieso verticaal weergegeven. Dus wil je het horizontaal weergeven?
Hoe dan ook, je hebt gevraagd om het hoofd-css-bestand te overschrijven en lokaal wat css in te stellen. Je kunt het niet doen binnen <ul>met style="", dat het van toepassing zou zijn op de kinderen (<li>).
Het lokaal manipuleren van uw lijst komt het dichtst in de buurt van:
<style>
li {display: inline-block;}
</style>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Antwoord 7, autoriteit 7%
li {
padding-left: 30px;
}<p>Some text to show left edge of container.<p>
<ul>
<li>List item</li>
</ul>