导航栏链接倾斜

Question

我是编码方面的新手，但我正在为朋友构建一个 Tumblr，使其看起来像一个专业网站。

导航栏是唯一给我带来麻烦的地方。我将其定位正确，并以 5 种不同的方式创建了图像映射，但每次链接都会向左倾斜，我无法确定问题所在。

这是映射的代码：

<div style="display:block; width:2819px; height:242px; background:url(http://25.media.tumblr.com/ebc94124ba5998d21de08ddcb2e49a2c/tumblr_mtyjp4OLQH1sw93yro1_1280.png); position:absolute; margin:0px 0px; background-repeat: no-repeat;">
<map id="imgmap20139301813" name="imgmap20139301813"><area shape="rect" alt="" title="" coords="471,63,510,80" href="http://davidallanhowell.tumblr.com/homepage" target="_self" /><area shape="rect" alt="" title="" coords="541,63,590,79" href="http://davidallanhowell.tumblr.com/resume" target="_self" /><area shape="rect" alt="" title="" coords="622,63,662,79" href="http://davidallanhowell.tumblr.com/media" target="_self" /><area shape="rect" alt="" title="" coords="691,64,735,79" href="http://davidallanhowell.tumblr.com/studio" target="_self" /><area shape="rect" alt="" title="" coords="765,63,817,79" href="http://davidallanhowell.tumblr.com/contact" target="_self" /></map>
</style>

直到我尝试修复它才出现的第二个问题是，现在我的图像上也出现了一个难看的灰色条。

Here's the full site.

帮助？

对于这可能是一个明显的问题，提前致谢和道歉。

Answer 1

很抱歉，你的代码有点乱！

为什么不从图片中删除图像映射和链接并使用 html 元素呢？

我要给你的这段代码是你开始工作的好开始！

<div style="display:block; width: 100%; height:242px; background:url(http://25.media.tumblr.com/ebc94124ba5998d21de08ddcb2e49a2c/tumblr_mtyjp4OLQH1sw93yro1_1280.png); position:absolute; margin:0px 0px; background-repeat: no-repeat;">
    <ul style="
    width: 361px;
    height: 17px;
    margin: 62px auto 0 auto;
    border-bottom: 2px solid rgba(0,0,0,0.1);
">
      <li style="
    float: left;
    margin: 0 15px;
">home</li>
      <li style="
    float: left; 
    margin: 0 15px;
">resume</li>
      <li style="
    float: left; 
    margin: 0 15px;
">media</li><li style="
    float: left; 
    margin: 0 15px;
">studio</li>
      <li style="
    float: left; 
    margin: 0 15px;
">contact</li>
    </ul>
</div>

希望对您有所帮助，任何问题都可以问！