HTML是向后的&；宽度把一切都搞砸了

我把文字放在图像上。我想我做对了。但当我通过chrome查看它时，它会向后显示导航

这是我的密码

HTML

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

你想要的是这个

移除所有浮动，并在

ul

上添加

text align

。还有其他方法可以实现你想要的，这只是其中之一

---

当您将

li

向右浮动时，它将反转html中显示的顺序，这就是您看到的删除浮动：右从.nav？您需要创建一个链接，因为您的链接包装不正确：

应该是

我修复了该html错误。我取下了浮子，但它只撞上了导航部分。这是我们正在尝试制作的完整版本，这是您告诉我进行更新后的样子。您的

li

几乎向右浮动。仍然在页面的左侧。而且图像不会在页面上显示：/I我的代码在基本级别上工作，如fiddle中所示。至于你的网站，我不知道你有什么其他组件可能会影响这一点。

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

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;
}

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

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

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