使無序列表li前面的序號變成這樣①②...

今天在看別人的面試經歷的時候,碰到了這樣一個題,剛開始還覺得只是lilist-style-type,但是突然一想,根本就沒有這個type,仔細一想,這個應該是考察你的css,那么我就使用css解決了這個問題:
html代碼如下:

   <ul>
      <li><span>1</span>1</li>
      <li><span>2</span>2</li>
      <li><span>3</span>3</li>
      <li><span>4</span>4</li>
      <li><span>5</span>5</li>
      <li><span>6</span>6</li>
   </ul>

css如下:

span{
      text-align: center;
      display:inline-block;
      background-color:white;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      line-height: 25px;
      margin-right: 10px;
      border:1px solid black;
}
li{
     list-style-type: none;
}

結果如下:


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,368評論 25 708
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,805評論 1 92
  • 題目:當愛成追憶 作者:楠木 目錄: 第一章 尹靜突然到訪 第二章 不完全的敘舊 第三章 那年初相見 第四章 青春...
    一生如燕閱讀 452評論 0 2
  • 旋轉模型: 水平或豎直方向鍵 水平或豎直90度Shift+方向鍵 順時針或逆時針Alt+左或右方向鍵 平移模型Ct...
    kingfans閱讀 1,673評論 0 8
  • 睿日懸寰宇, 幽蘭綻院庭, 蕙風難隱碧空縈。 隅角坐觀煙景, 三夢展鹍鵬。 牧緒云中鶴, 凝眸掌上屏。 古今人物論...
    風音云影閱讀 531評論 3 10