- <style>
- li{
- margin: 2px 3px 3px 8px;
- padding: 5px;
- background: url(/images/sider_siteinfo.gif) no-repeat 0 50%;
- list-style-type: none;
- list-style-position: inside;
- }
- </style>
- <div>
- <ul>
- <li> 小弟,出道,人生地不熟,请各位指教</li>
- <li> 小弟,出道,人生地不熟,请各位指教</li>
- <li> 小弟,出道,人生地不熟,请各位指教</li>
- <li> 小弟,出道,人生地不熟,请各位指教</li>
- <li> 小弟,出道,人生地不熟,请各位指教</li>
- </ul>
- </div>
<style> li{ margin: 2px 3px 3px 8px; padding: 5px; background: url(/images/sider_siteinfo.gif) no-repeat 0 50%; list-style-type: none; list-style-position: inside; } </style> <div> <ul> <li> 小弟,出道,人生地不熟,请各位指教</li> <li> 小弟,出道,人生地不熟,请各位指教</li> <li> 小弟,出道,人生地不熟,请各位指教</li> <li> 小弟,出道,人生地不熟,请各位指教</li> <li> 小弟,出道,人生地不熟,请各位指教</li> </ul> </div>
50%是垂直居中的意思!
控制图片和LI里面内容的间距
1、加 可以加大间距
2、padding-left来控制图片和LI里面内容的间距:
- <style>
- li{
- margin: 2px 3px 3px 8px;
- padding-left: 25px;
- background: url(/images/sider_siteinfo.gif) no-repeat 0 50%;
- list-style-type: none;
- list-style-position: inside;
- }
<style> li{ margin: 2px 3px 3px 8px; padding-left: 25px; background: url(/images/sider_siteinfo.gif) no-repeat 0 50%; list-style-type: none; list-style-position: inside; }
如果不是以背景色的图片,加上vertical-align:middle
- <ul>
- <li> <img style=‘vertical-align:middle' src='icon01.gif' />前面的图片要和我对齐</li>
- <li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的图片要和我对齐</li>
- <li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的图片要和我对齐</li>
- <li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的图片要和我对齐</li>
- <li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的图片要和我对齐</li>
- </ul>
<ul> <li> <img style=‘vertical-align:middle' src='icon01.gif' />前面的图片要和我对齐</li> <li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的图片要和我对齐</li> <li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的图片要和我对齐</li> <li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的图片要和我对齐</li> <li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的图片要和我对齐</li> </ul>