2015-05-24 5 views
7

Das mag wie eine Dump-Frage erscheinen, aber ich habe eine UL zu einer Basisseite hinzugefügt, und die Liste scheint nicht zentriert zu sein. Es gibt nichts besonderes an der Liste. Keine spezifischen CSS hinzugefügt: nur eine Liste. Wenn ich live lade, ist es etwas außermittig.
Gibt es auf der linken Seite einen Standardrand oder eine Standardfüllung?Hat UL Standardrand oder Auffüllung?

<h3>Title Heading</h3> 
    <ul id="listItems"> 
     <li>itemOne</li> 
     <li>itemTwo</li> 
     <li>itemThree</li> 
    </ul> 

Der Hauptkörper hat alle CSS-Code für das Zentrieren, Ausrichten, Schwimmer usw. Der ‚Titel Header‘ perfekt auszurichten. Nur Liste ist ein wenig aus.

Vielen Dank.

Oh, weiß nicht, ob das wichtig ist, aber ich habe die 'id' Ursache ... wollte 'first-of-type' verwenden, um 1. Element em (fett) zu geben.

+0

hinzufügen ul - padding: 0; – Dmitriy

+1

[Der W3C-Standard] (http://www.w3.org/TR/html5/rendering.html#lists) sagt, dass "ul" ein 40px linkes Padding haben sollte, aber Browser haben ihre eigenen Standardeinstellungen. –

Antwort

9

Die Problem ist, dass standardmäßig Browser benutzerdefinierte CSS haben - in Chrom zum Beispiel:

ul, menu, dir { 
    display: block; 
    list-style-type: disc; 
    -webkit-margin-before: 1em; 
    -webkit-margin-after: 1em; 
    -webkit-margin-start: 0px; 
    -webkit-margin-end: 0px; 
    -webkit-padding-start: 40px; 
} 

Sie werden eine benutzerdefinierte Regel für Ihre ul verwenden müssen:

element.style { 
    margin-left: 0px; 
    /* set to 0 if your not using a list-style-type */ 
    padding-left: 20px; 
} 
+1

OK, die Polsterung scheint zu arbeiten. Ich fühle mich seltsam, wenn ich eine Standardeinstellung, die ich nicht steuern kann oder die ich in meinem Code nicht erkennen kann, mit Padding ausstatte. Aber ich denke, was auch immer funktioniert. – JZeig1

+0

Ich möchte Ihnen beiden Kredit geben, aber ... – JZeig1

2

Listen werden immer ausgerichtet, so dass der Text mit der Kante des übergeordneten Elements übereinstimmt. Dies bedeutet, dass die Aufzählungspunkte standardmäßig außerhalb (links) des Elements sitzen. Sie können die Ausrichtung zwingen, den Aufzählungspunkt passieren, nicht der Text wie folgt:

ul { 
    list-style-position: inside; } 

Alternativ können Sie nur Ihre eigenen Marge fügen Sie die gesamte Liste Element zu drücken, wie so:

ul { 
    margin-left: 20px; } 
+0

Ok, ich habe den Vorschlag auf zwei Arten versucht. Ich habe den Code zu css unter dem Selektor #itemList hinzugefügt. Ich fügte auch einen Abschnitt um die Ul mit dem Titel id = "bodyList" hinzu (ich versuchte, mich nicht mit meinem spezifischen Code zu befassen, um f-o-t zu ändern). Nichts passiert. Ich würde den linken Rand verwenden, aber ich bin mir nicht sicher, wie sich der Float während der Größenänderung auswirken wird. außerdem gibt es keine Kugeln. – JZeig1

+0

@ JZeig1 Nun, es sieht aus wie Ihr Problem dort ist die Anwendung der CSS auf '#itemList', wenn es '# listItems' sein soll – Coop

Verwandte Themen