首頁 > web前端 > css教學 > 主體

css:li中的list-style小圓點和文字沒有居中對齊的解決方法

黄舟
發布: 2017-06-29 09:32:16
原創
8096 人瀏覽過

li的list-style小圓點和文字沒有居中對齊?

css: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的高度一樣;

以上是css:li中的list-style小圓點和文字沒有居中對齊的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板