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

下图显示了格式问题

标签： htmlcssinline

Answer 1

<nav>最合适的方法是在元素中包含您的徽标和导航链接。现在它们被分解成单独的元素，这将导致它们堆叠。最近，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>