图像之间的差距

时间：2013-05-26 15:30:30

标签： html css image

我正在尝试为朋友的博客制作导航栏（http://testcheww.blogspot.com/），但我总是得到这个小空间：

我试图改变任务，支持和玩位，但它不起作用。有关如何解决它的任何建议？这是代码：

<center>
  <div style='background-image: url(http://files.tinkatollidunes.com/nav/left.png) ; background-size: 45px 86px; height: 86px; width: 45px; border: 0px; margin-left: -1139px; margin-bottom: -80x;'/>
    </center>
    <center>
<div class='homebutton' style='position:relative; left:-477px; top:-86px;'>
    <a href='http://www.tinkatollidunes.com/'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/home.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/homehover.png' width='141px'/> 
    </a>
</div>
    </center>
    <center>
      <div style='height: 86px; width: 63px; border: 0px; margin-top: -172px; margin-left: -750px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/home-about.png' width='63px'/>
      </div>
    </center>
    <center>
<div class='aboutbutton' style='position:relative; left:-273px; top:-86px; margin-bottom: -82px;'>
    <a href='http://www.tinkatollidunes.com/p/about.html'>
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/about.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/abouthover.png' width='141px'/> 
    </a>
</div>
    </center>
    <center>
      <div style='height: 86px; width: 72px; border: 0px; margin-top: -172px; margin-left: -333px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/about-guides.png' width='72px'/>
      </div>
    </center>
    <center>
        <div class='guidesbutton' style='position:relative; left:-60px; top:-86px; margin-bottom: -82px;'>
<a href='http://www.tinkatollidunes.com/p/guides.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/guides.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/guideshover.png' width='141px'/> 
</a> 
</div>
    </center>
        <center>
      <div style='height: 86px; width: 58px; border: 0px; margin-top: -172px; margin-left: 78px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/guides-quests.png' width='58px'/>
      </div>

<div class='questsbutton' style='position:relative; left:137px; top:-86px; margin-bottom: -82px;'>
<a href='http://www.tinkatollidunes.com/p/quests.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/quests.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/questshover.png' width='141px'/> 
</a> 
</div>
    </center>
            <center>
      <div style='height: 86px; width: 52px; border: 0px; margin-top: -172px; margin-left: 470px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/quests-support.png' width='52px'/>
      </div>
    </center>
        <center>
<div class='supportbutton' style='position:relative; left:334px; top:-86px; margin-bottom: -82px;'>
<a href='http://www.tinkatollidunes.com/p/support-us.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/support.png' width='150px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/supporthover.png' width='150px'/> 
</a> 
</div>
    </center>
    <center>
      <div style='height: 86px; width: 52px; border: 0px; margin-top: -172px; margin-left: 874px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/support-play.png' width='54px'/>
      </div>
    </center>
        <center>
      <div style='height: 86px; width: 142px; border: 0px; margin-top: -86px; margin-right: -1021px;'><a href='http://www.tinkatolli.com/play/'><img height='86' src='http://files.tinkatollidunes.com/nav/play.png' width='142'/></a>
      </div>
    </center>

3 个答案:

答案 0 :(得分：3)

您的图片之间有空白。

<img (content) /> 
<img (content) />

此处两幅图像之间的返回功能与空间功能完全相同。因此解决方案是删除返回。

<img (content) /><img (content) />

就是这样。

顺便说一下，你不应该使用width和height属性（至少从本世纪初开始就已弃用），但如果你还在使用它们，那么给它们一个他们的价值的数字，而不是css风格的长度 也就是说，141，而不是141px 但实际上使用CSS要好得多。同样适用于<center>元素。

除非您使用的是XHTML，否则无需使用/>结束标记。只需>即可。

答案 1 :(得分：1)

我将Quests的宽度更改为143，将Support的宽度更改为152，每个增加2个像素（a和b），看起来很好。

enter image description here

可能不是修复它的最好方法，但我不太了解你的布局。

答案 2 :(得分：0)

试试这个：

<center>
  <div style='background-image: url(http://files.tinkatollidunes.com/nav/left.png) ; background-size: 45px 86px; height: 86px; width: 45px; border: 0px; margin-left: -1139px; margin-bottom: -80x;'/>
    </center>
    <center>
<div class='homebutton' style='position:relative; left:-477px; top:-86px;'>
    <a href='http://www.tinkatollidunes.com/'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/home.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/homehover.png' width='141px'/> 
    </a>
</div>
    </center>
    <center>
      <div style='height: 86px; width: 63px; border: 0px; margin-top: -172px; margin-left: -750px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/home-about.png' width='63px'/>
      </div>
    </center>
    <center>
<div class='aboutbutton' style='position:relative; left:-273px; top:-86px; margin-bottom: -82px;'>
    <a href='http://www.tinkatollidunes.com/p/about.html'>
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/about.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/abouthover.png' width='141px'/> 
    </a>
</div>
    </center>
    <center>
      <div style='height: 86px; width: 72px; border: 0px; margin-top: -172px; margin-left: -333px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/about-guides.png' width='72px'/>
      </div>
    </center>
    <center>
        <div class='guidesbutton' style='position:relative; left:-60px; top:-86px; margin-bottom: -82px;'>
<a href='http://www.tinkatollidunes.com/p/guides.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/guides.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/guideshover.png' width='141px'/> 
</a> 
</div>
    </center>
        <center>
      <div style='height: 86px; width: 58px; border: 0px; margin-top: -172px; margin-left: 78px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/guides-quests.png' width='58px'/>
      </div>

<div class='questsbutton' style='position:relative; left:137px; top:-86px; margin-bottom: -82px;'>
<a href='http://www.tinkatollidunes.com/p/quests.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/quests.png' width='141px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/questshover.png' width='141px'/> 
</a> 
</div>
    </center>
            <center>
      <div style='height: 86px; width: 52px; border: 0px; margin-top: -172px; margin-left: 458px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/quests-support.png' width='52px'/>
      </div>
    </center>
        <center>
<div class='supportbutton' style='position:relative; left:334px; top:-86px; margin-bottom: -82px;'>
<a href='http://www.tinkatollidunes.com/p/support-us.html'> 
<img alt='' class='a' height='86px' src='http://files.tinkatollidunes.com/nav/support.png' width='150px'/> 
<img alt='' class='b' height='86px' src='http://files.tinkatollidunes.com/nav/supporthover.png' width='150px'/> 
</a> 
</div>
    </center>
    <center>
      <div style='height: 86px; width: 52px; border: 0px; margin-top: -172px; margin-left: 870px;'><img height='86px' src='http://files.tinkatollidunes.com/nav/support-play.png' width='54px'/>
      </div>
    </center>
        <center>
      <div style='height: 86px; width: 142px; border: 0px; margin-top: -86px; margin-right: -1021px;'><a href='http://www.tinkatolli.com/play/'><img height='86' src='http://files.tinkatollidunes.com/nav/play.png' width='142'/></a>
      </div>
    </center>
相关问题
最新问题