Question

我将文字放在图像上。我认为我做的正确。但是当我通过chrome查看它时，它向后显示导航。

http://gyazo.com/464d7131759cfdb6b1d64ed52bc127ef

这是我的代码

HTML

<nav>
    <ul>
        <li><a href="index.html">Homepage</a></li>
        <li>Forum</li>
        <li>Donate</li>
        <li>Vote</li>
    </ul>
</nav>

CSS

nav {
  width: auto;
  padding: 5px 5px 5px 5px;
  display:inline-block;
  background: url('Img/navigation.png') no-repeat center;
}

nav ul{
    list-style:none;
    padding:10px 8px 10px 8px;
    float: right;
    width: 1600px
}

nav li{
    list-style:none;
    padding:15px 10px 15px 0;
    display: inline-block;
    font-size: 15px;
    color: green;
    float: right;
}

nav a, nav a:visited{
    color:#ffffff;
    text-decoration:none;
    font-weight:bold;
    font-size:20px;
    float: right;
}

然后我的第二个问题是当我尝试增加宽度以使其适合整个页面时，它会移动所有内容并将文本从背景中移除。

http://gyazo.com/3a022e7dc613b3afb772068ac3764ca1

nav ul{
list-style:none;
padding:10px 8px 10px 8px;
    float: right;
    width: 1600px
}

Answer 1

你想要的是这个

http://jsfiddle.net/dJ4a8/1/

ul {
    width: 100%;
    text-align: right;
}

ul li {
    display: inline-block;
    vertical-align: top;
}

删除您拥有的所有花车，并在text-align上添加ul。还有其他方法可以达到你想要的效果，这只是其中之一。

当您将li向右浮动时，它会反转出现在您所看到的html中的顺序

HTML是倒退的＆amp;宽度使一切都变得混乱

1 个答案: