不显示简单的 HTML 导航按钮答案

【问题标题】：Simple HTML nav buttons aren't displaying不显示简单的 HTML 导航按钮
【发布时间】：2015-12-06 00:44:41
【问题描述】：

好的，我的导航按钮过去会显示，但现在不显示了。我没有使用 javascript 或任何“花哨”之类的东西。在 Dreamweaver 和 jsfiddle 中它们显示，但是当我通过 Firefox/Internet Explorer 打开该站点时，我的导航按钮是幽灵。我还通过http://validator.w3.org/验证了网站

JSFiddle 链接： https://jsfiddle.net/3c7yky0z/

以下是示例：

织梦者：

jsfiddle:

火狐：有什么想法吗？

    nav {
        position: absolute;
        bottom: 0;
        left: 0;
        margin-bottom: 1em;
    }
    nav a {
        padding: .25em 5em;
    }
    nav a:hover {
        font-size: larger;
    }
    header, section, footer, aside {
        padding: .5em
    }
    header {
        padding: 3em;
        height: 330px;
        margin: 0;
        background-color: #a39b90;
        position: relative;
        background-image: url(/images/CrystalCoastBanner.jpg);
        background-repeat: no-repeat;
        background-image: url(../images/CrystalCoastBanner.jpg);
        background-repeat: no-repeat;
    }

    <body>
    <header style="text-align:center">
    <a href="http://pbernhardt.mydevryportfolio.com/wgd232/index.html"><h1> Crystal Coast Theater.
    </h1></a>
    <nav style="text-align:center">
    <a href="http://pbernhardt.mydevryportfolio.com/wgd232/index.html">Home</a>
    <a href="http://pbernhardt.mydevryportfolio.com/wgd232/event.html">Events</a>
    <a href="http://pbernhardt.mydevryportfolio.com/wgd232/ticket.html">Tickets</a>
    <a href="http://pbernhardt.mydevryportfolio.com/wgd232/contact.html">Contact us</a>
    </nav>
    </header>

【问题讨论】：

添加了我的小提琴链接
跟位置有关。尝试检查 web 工具中的元素并使用 css

标签： html css nav

【解决方案1】：

你的导航元素上有这个：

nav {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 1em;
}

如果你向下滚动，你会找到它，就在那个位置会有它的地方。

Demo sans those styles

关于您的评论，这是我在 Firefox（和 Chrome）中看到的原始小提琴：

【讨论】：

对我来说，它甚至没有在 Firefox 的底部显示它们。
现在这完全让我大吃一惊。它在我的屏幕上显示对我来说完全不同的东西，但我会考虑在我的导航中使用 CSS 中的位置元素。谢谢。
专业提示：良好的布局很少需要显式定位。它通常被用作解决更简单标记结构不存在的问题的拐杖。
这个网站是为学校的在线课程设计的，所以（几乎）所有的代码都来自我的课程说明；因此网站的有趣主题选择。但是，我非常感谢您对此事的支持。如果我有足够的代表，我会 +1 你。