如何使下载两个字和要下载的软件一一对齐，是下载的图标和下载两个字之间的间距变小一点
<body>
<div class="box">
<h2><a href="#">更多推荐</a><span><a href="#"> 更多>></a></span></h2>
<ul class="downlist">
<li class="software1"><a href="#">QQ旋风 </a></li><li class="download"><span><a href="#">下载</a></span></li>
<li class="software2"><a href="#">腾讯视频播放器</a></li><li class="download"><span><a href="#">下载</a></span></li>
<li class="software3"><a href="#">QQ影音</a></li> <li class="download"> <span><a href="#">下载</a></span></li>
<li class="software4"><a href="#">小Q书桌</a></li> <li class="download"><span><a href="#">下载</a></span></li>
<li class="software5"><a href="#">Foxmail</a></li><li class="download"> <span><a href="#">下载</a></span></li>
<li class="software6"><a href="#">顽固木马克星</a></li><li class="download"><span><a href="#">下载</a></span></li>
</ul>
</div>
</body>
这是css的
*{margin:0 ;padding:0;font-size:14px;font-family:"新宋体";}
.box{width:300px;margin:0 auto;}
a{text-decoration:none;color:#990099;}
a:hover{text-decoration:underline;}
h2{border-bottom:1px solid #cce6f5;padding-bottom:5px;}
h2 span{float:right; }
.downlist{list-style-type:none;line-height:30px;}
.downlist li{overflow:hidden;padding-left:20px; margin-bottom:5px;}
.download{background:url(images/downicon.gif) no-repeat 0 6px;float:right;}
.download a{text-decoration:underline;}
.software1{background:url(images/soft_r_1.gif) no-repeat 0 5px;}
.software2{background:url(images/soft_r_2.gif) no-repeat 0 5px;}
.software3{background:url(images/soft_r_3.gif) no-repeat 0 5px;}
.software4{background:url(images/soft_r_4.gif) no-repeat 0 5px;}
.software5{background:url(images/soft_r_5.gif) no-repeat 0 5px;}
.software6{background:url(images/soft_r_6.gif) no-repeat 0 5px;}
reborn_web浏览 1318回答 2
2回答
-
闹小志
”使下载的图标和下载两个字之间的间距变小一点“的问题：在你的css代码中有：.downlist li{overflow:hidden;padding-left:20px; margin-bottom:5px;}正是因为你给每一个li都设置了padding-left：20px 所以间距才大呀！解决办法：一是像之前说的，一行就写在一个li中不要分开两个li；二是选择器不要用.downlist li或者重写为，.downlist .download{padding-left:10px;}....总之，解决办法多多的，找到问题的源头解决办法就随便用啦~
随时随地看视频慕课网APP
Html/CSS