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

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

background-size：cover;拉伸图像，直到它填满您的内容框。您也可以使用不同尺寸的图像。

UL / LI CSS代码无法正确显示顶层菜单

1 个答案: