猿问

如何使下载两个字和要下载的软件一一对齐,是下载的图标和下载两个字之间的间距变小一点

<body>

<div class="box">
    <h2><a href="#">更多推荐</a><span><a href="#"> 更多&gt;&gt;</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
我要回答