HTML-Liste nicht CSS-Marge Regeln

Question

folgen

So habe ich einen Code, der den Standard-Marge und Polsterung für den HTML-Code setzt auf 0

CSS:

body,html { 
    padding: 0; margin: 0; 
    width:100%;font-family:arial; 
} 
#headingUl li{ 
    list-style-type:none; 
} 
    </style>  

HTML:

<div id="heading"> 
    <ul id="headingUl"> 
     <li>a</li> 
     <li>b</li> 
     <li>b</li> 
    </ul> 
</div 

... aber die Listen haben immer noch einen linken Rand.

Answer 1

#headingUl { 
    list-style-type:none; 
    padding: 0; 
    margin: 0; 
} 

Browser gesetzt Standard ul, ol padding. Sie müssen es überschreiben.

Sie können es auf allen Listen nicht zurückgesetzt wieder darum zu kümmern:

ul, ol { 
    list-style-type:none; 
    padding: 0; 
    margin: 0; 
} 

Answer 2

Um diese Art von Verhalten zu vermeiden Sie die automatischen Stile zurücksetzen sollte.

*{ 
    margin:0px; 
    padding: 0px; 
} 

Answer 3

Als @Nenad Vracar sagte ul Element einen auf 40px eingestellte Standard padding-left oder margin-left Wert hat.

Siehe Dokumentation hier: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation

Sie müssen es so zu überschreiben:

#headingUl { padding-left:0; margin-left: 0; } 

In Internet Explorer und Opera werden die Listen eingekerbt durch einen linken Rand von 40 Pixel einstellen auf dem Element. Gecko, auf der anderen Hand setzt ein linkes Polster von 40 Pixel für das Element

Answer 4

Sie padding:0; und margin:0; zum html Container zuzugeordnet und den body Behälter, der nicht die inneren Elemente beeinflussen, so dass Sie die Notwendigkeit hinzufügen folgende zu Ihren Stilen:

ul { 
    padding:0; 
    margin:0; 
} 

Answer 5

Ich empfehle Ihnen Hard Reset alle Eigenschaften mit dem Programm von Eric Meyer - CSS Reset erstellt.

http://meyerweb.com/eric/tools/css/reset/

Für den schnellen Einsatz Code nutzloser Füllung unter

* { 
    padding: 0; 
    margin: 0; 
}