Heim >Web-Frontend >CSS-Tutorial >css: Lösung dafür, dass Punkte und Text im Listenstil in li nicht zentriert sind
css: Lösung dafür, dass Punkte und Text im Listenstil in li nicht zentriert sind
- 黄舟Original
- 2017-06-29 09:32:168136Durchsuche
lis Listenstil kleine Punkte und Text sind nicht zentriert?
<ul>
<li><a>我们开始</a></li>
<li><a2016</a></li></ul>.ul li{
list-style:disc inside;}Ich habe das Gefühl, dass die kleinen Punkte und der Text nicht zentriert sind (die kleinen Punkte sind etwas tiefer?).
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>demo</title></head><style type="text/css">
*{padding:0; margin:0; list-style:none;}
.list{ width:600px; margin:10px auto;}
.list li:before{
content:'';
width:4px;
height:4px;
border-radius:50%;
background:#000;
display:inline-block;
margin-right:5px;
vertical-align:middle;
margin-top:-3px;}
</style>
<body>
<ul class="list">
<li>呵呵!</li>
<li>别说话吻我</li>
<li>小火车怎么这么污?</li>
</ul></body></html>Im Allgemeinen schreibe ich selbst einen mit der Vorher-Pseudoklasse.
Es ist einfach, einen Punkt mit span zu schreiben .
Versuchen Sie es mit line-height, das ist die gleiche Höhe wie die aktuelle li;
Das obige ist der detaillierte Inhalt voncss: Lösung dafür, dass Punkte und Text im Listenstil in li nicht zentriert sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Warum funktioniert list-style:none in CSS nicht?Nächster Artikel：Warum funktioniert list-style:none in CSS nicht?