html - 无法获取文本以转到页面顶部

Question

我无法让导航文本内嵌显示在页面顶部的灰色栏中。我猜我的 CSS 存在某种类型的问题。在我将文本包含在 class="box"中并且格式正常工作之前，但按钮不起作用，所以我创建了一个新的 div class="new"这样按钮就可以工作了。

HTML:

<div class="box-contents">
    <img src="../images/LOGO.png" alt="Stephen Crawford Photography Logo">
</div>

<div class="box">
</div>
<div class="new">
    <nav>
        <ul>
            <li class="button"><a class="button-text" href="portfolio.html">portfolio</a></li>
            <li class="button"><a class="button-text" href="../html/about.html">about</a></li>
            <li class="button"><a class="button-text" href="../html/contact.html">contact</a></li>
        </ul>
    </nav>
</div>

CSS:

@charset "utf-8";
/* CSS Document */
body{
  margin: 0;
  padding: 0;
  font-size: 100%;
}
.box {
    width: auto;
    height: 120px;
    background: grey;
    overflow: hidden;
    opacity: 0.85;
    position: relative;
    z-index: 3;
}
.box-contents {
    margin: auto;
    width: 100%;
    overflow: hidden;
    position: absolute;
    opacity: 1 !important;
    z-index: 4;
}
.new ul{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: lighter;
    letter-spacing: 2px;
    font-size: 2em;
    margin-top: 0;
    padding-top: 25px;
    float: right;
    margin-right: 100px;
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline;
    z-index: 99;
}
a{
    text-decoration: none;
    color: inherit;
}
img{
  display: block;
  float: left;
  width: 150px;
  margin: 10px 2%;
}
.images{
    display: block;
    width: 800px;
    float: inherit;
    margin: auto;
    padding-bottom: 20px;
    padding-top: 20px;
}

下图显示格式问题

Answer 1

最合适的方法是在您的 <nav> 中包含您的 Logo 和导航链接。元素。现在它们被分解成单独的元素，这将导致它们堆叠。最近，flexbox 已成为此类情况的最佳解决方案。您将调整导航容器和其中的无序列表。 ul 上的 margin 属性已设置为 auto ，这会将导航项推向右侧。

我删除了所有不必要的元素，因为我们真的只需要 <nav> .希望这会有所帮助。我只包含了相关的 CSS，以便您更好地了解正在发生的事情。

nav {
  display: flex;
  align-items: center;
  background-color: grey;
}

nav ul {
  display: flex;
  margin: 0 0 0 auto;
  list-style-type: none;
}

nav ul li {
  padding-right: 10px;
}

<nav>
    <img src="//placehold.it/150x50" alt="Stephen Crawford Photography Logo">
    <ul>
        <li class="button"><a class="button-text" href="portfolio.html">portfolio</a></li>
        <li class="button"><a class="button-text" href="../html/about.html">about</a></li>
        <li class="button"><a class="button-text" href="../html/contact.html">contact</a></li>
    </ul>
</nav>