Rumah > Artikel > hujung hadapan web > css：li中的list-style小圆点和文字没有居中对齐的解决办法

css：li中的list-style小圆点和文字没有居中对齐的解决办法

黄舟asal: 2017-06-29 09:32:168094semak imbas

li的list-style小圆点和文字没有居中对齐？

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

感觉小圆点和文字没有居中对齐（小圆点在偏下一点），有什么方法使他们居中对齐吗？

<!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>

一般这样的情况，我都是自己用before伪类自己写一个、

自己用span写一个点就很好控制了，去掉ul的list-style

试一试line-height,和当前li的高度一样;

Atas ialah kandungan terperinci css：li中的list-style小圆点和文字没有居中对齐的解决办法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：css中list-style:none为什么不起作用？Artikel seterusnya：CSS： list-style修改列表属性控制li标签样式

Artikel berkaitan

Lihat lagi