html - UL/LI CSS 代码无法正确显示顶部菜单

Question

我在尝试使用 ul 和 li 标签而不是 div 后，在让我的顶级菜单正常工作时遇到了错误。我有一个带有六个 li 标签的 ul。我希望每个 li 标签都包含一个图像，该图像应与其他图像具有相同的尺寸。每个 li 标签图像应水平占据页面的 1/6 以下。垂直方向它们应该约为 100 像素。我目前无法让图像正常显示。即使我使用的是相同的测试图像，所有单独的标签的呈现方式也不同。

这是我的 CSS、HTML 和 Imgur 链接中使用的图像:

HTML:http://pastebin.com/raw/EbyXvXEg

CSS:http://pastebin.com/raw/P8nkGHxN

图片:https://imgur.com/a/WF6Dd

我无法让菜单按我想要的方式工作。中间的菜单项总是显示更大或更小的图片。我无法让它工作。有人至少可以帮我指出帮助的方向吗？我不确定如何让图像在 jsfiddle 中工作，否则我会发布它。

Answer 1

尝试添加jour 图片作为a 标签的背景。还将您的样式应用于标签。

a {
    width: 16.66%;
    height: 100px;
    display: block;
    background: url(your image URL);
    background-position: center;
    background-size: cover;
    background-repeat: none;
}

背景尺寸:封面；拉伸(stretch)图像，直到它填满您的内容框。您还可以使用不同尺寸的图像。