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

黄舟
Freigeben: 2017-06-29 09:32:16
Original
8123 Leute haben es durchsucht

lis Listenstil kleine Punkte und Text sind nicht zentriert?

css: Lösung dafür, dass Punkte und Text im Listenstil in li nicht zentriert sind

<ul>
    <li><a>我们开始</a></li>
    <li><a2016</a></li></ul>.ul li{
   list-style:disc inside;}
Nach dem Login kopieren

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:&#39;&#39;; 
    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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage