UL/LI CSS 代码未正确显示顶部菜单答案

【问题标题】：UL/LI CSS code not displaying top menu correctlyUL/LI CSS 代码未正确显示顶部菜单
【发布时间】：2016-08-15 10:17:37
【问题描述】：

由于我尝试使用 ul 和 li 标签而不是 div，因此我无法让我的顶部菜单正常工作。我有一个 ul，里面有六个 li 标签。我希望每个 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 中工作，否则我会发布。

【问题讨论】：

你能做一个jsfiddle吗？只需链接到图片在网络上的位置即可。

标签： html css drupal drupal-7

【解决方案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;
}

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

【讨论】：