• 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>
  • 相关阅读:
    链表
    线程池 ------ linux C实现
    thymeleaf 标签使用方法
    thymeleaf的配置
    exception processing, template error resolving template
    Thymeleaf模板表达式
    Mybatis:使用bean传值,当传入值为Null时,提示“无效的列类型”的解决办法
    windows 查看端口
    session与cookie的区别
    substr与substring的区别
  • 原文地址:https://www.cnblogs.com/pricks/p/1616241.html
Copyright © 2020-2023  润新知