zurb foundation 4: Bullets werden in Chrome und IE9 / IE10 - zurb-foundation nicht zentriert

Ok .. Also habe ich (nach besten Kräften) in der Liste nachgeschaut, aber ich habe nichts Ähnliches gefunden. Wenn es da draußen eine Antwort gibt, entschuldige ich mich dafür, ein Duplikat hinzuzufügen ...

Ich verwende das Foundation 4-Framework mit der neuesten Version.

Ich habe Kugeln (UL meistens) an vielen Stellen. Wie auch immer, wenn ich benutze text-align: center Für jeden Text mit einer Liste mit Aufzählungszeichen ist der normale Text und der Listentext zentriert, aber die Aufzählungszeichen selbst (Quadrat, Disc usw.) nicht.

Jetzt der komische Teil .... dieses Problem tritt auf nur in Chrome und IE9 / IE10. Es funktioniert wie vorgesehen in Firefox / Safari. Ich habe auch versucht, die .text-center Klasse (Teil von foundation.css), die im Wesentlichen das Gleiche tut, d.h. text-align: center.

Hier ist der Testlink http://www.crevolve.com/test/ ....

Jede Hilfe wird sehr geschätzt ... Danke ...

Antworten:

4 für die Antwort № 1

Ich habe Kugeln (UL meistens) an vielen Stellen.Wie auch immer, wenn ich benutze text-align: zentriert für jeden Text mit einer Aufzählungsliste den normalen Text und der Listentext ist zentriert, aber die Kugeln selbst (Quadrat, Scheibe usw.) sind nicht.

Sie müssen das einstellen list-style-position von deinem ul, die standardmäßig einen Wert von outside. Es bedeutet, dass die Kugeln außerhalb des Inhaltsflusses liegen (Lesen Sie hier mehr darüber).

Um Ihr Problem zu lösen, können Sie Folgendes tun:

ul.square {
list-style-position: inside;
list-style-type: square;
text-align:center;
}

Aber bleib dran das wird dein Problem NICHT vollständig lösen, Denke ich, weil, wenn Sie unterschiedliche Länge von Texten in Ihrem haben ul dann wird alles zentriert sein. Das bedeutet, dass sie nicht ausgerichtet werden und es wird nicht gut aussehen. Sieh dir die erste Folie auf dieser Geige an um zu sehen, was ich meine.

Um es zentriert und gut aussehen zu lassen, können Sie Folgendes tun:

.container {
float:right;
position:relative;
right:50%;
background-color:lightgreen;
}
.inner-container {
float:left;
position:relative;
left:50%;
background-color:lightyellow;
}
ul.square {
list-style-type: square;
width:300px;
}

<div> /* the wrapper div */
<div class="container"> /* outer container to offset by 50% */
<div class="inner-container"> /* inner container to make it center */
<ul class="square">
<li>First Item</li>
<li>Second Item, this is a longer text</li>
</ul>
</div>
</div>
</div>

Das Arbeitsprobe befindet sich auf Folie 2 der Stichprobe. Ich habe eine Hintergrundfarbe hinzugefügt, damit Sie besser sehen können, wie es funktioniert.


0 für die Antwort № 2

Wenn Sie die List-Style-Position anzeigen möchten: außerhalb, während Sie den Inhalt und den Inhalt der Liste in Chrome zentrieren können:

ul {
list-style-position: inside;
}
ul {
padding-left: 11px;
text-indent: -11px;
}
li {
margin-left: -11px;
}

Nachteil:11px ist die Breite des Raumes zwischen dem Anfang der Kugel und dem Anfang des Textes Ihres li. Es ist eine hässliche magische Zahl, die von einem Browser zum anderen variieren kann. Leider habe ich keinen Weg gefunden, es zu rationalisieren.