zoukankan      html  css  js  c++  java
  • li中的图片和文字不对齐div+css,解决方法

     
    1. <style>
    2. li{
    3.     margin: 2px 3px 3px 8px;
    4.     padding: 5px;
    5.     background: url(/images/sider_siteinfo.gif) no-repeat 0 50%;
    6.     list-style-type: none;
    7.     list-style-position: inside;
    8. }
    9.  
    10. </style>
    11.  
    12. <div>
    13.  
    14. <ul>
    15.   <li> 小弟,出道,人生地不熟,请各位指教</li>
    16.   <li> 小弟,出道,人生地不熟,请各位指教</li>
    17.   <li> 小弟,出道,人生地不熟,请各位指教</li>
    18.   <li> 小弟,出道,人生地不熟,请各位指教</li>
    19.   <li> 小弟,出道,人生地不熟,请各位指教</li>
    20. </ul>
    21. </div>

    50%是垂直居中的意思!

    控制图片和LI里面内容的间距
      1、加 可以加大间距
      2、padding-left来控制图片和LI里面内容的间距:
     
    1. <style>
    2. li{
    3.     margin: 2px 3px 3px 8px;
    4.     padding-left: 25px;
    5.     background: url(/images/sider_siteinfo.gif) no-repeat 0 50%;
    6.     list-style-type: none;
    7.     list-style-position: inside;
    8. }

    如果不是以背景色的图片,加上vertical-align:middle

     
    1. <ul>
    2.   <li> <img style=‘vertical-align:middle' src='icon01.gif' />前面的图片要和我对齐</li>
    3.   <li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的图片要和我对齐</li>
    4.   <li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的图片要和我对齐</li>
    5.   <li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的图片要和我对齐</li>
    6.   <li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的图片要和我对齐</li>
    7. </ul>
  • 相关阅读:
    推荐几个不错的console调试技巧
    JS字符串截取函数slice(),substring(),substr()的区别
    ES6入门基础
    setTimeout的小尴尬
    Javascript自定义事件功能与用法实例分析
    JavaScript中函数定义的三种方法
    数组方法
    数组选择排序
    数组冒泡排序
    this指向问题(1)
  • 原文地址:https://www.cnblogs.com/pricks/p/1616241.html
Copyright © 2011-2022 走看看