【问题标题】: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;
}

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

【讨论】:

    猜你喜欢
    • 2011-07-06
    • 1970-01-01
    • 1970-01-01
    • 2012-11-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多