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

來源:互聯網
上載者:User
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:'';     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的高度一樣;

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.