Question

我无法将导航文本显示为内嵌和页面顶部的灰色栏。我猜我的CSS有一些问题。在我将该文本包含在class =＆＃34; box＆＃34;之前格式化工作正常，但按钮不起作用，所以我创建了一个新的div class =＆＃34; new＆＃34;所以按钮会起作用。

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>元素中包含您的徽标和导航链接。现在他们被分解成单独的元素，这将导致它们堆叠。最近，flexbox已经成为这种情况的最佳解决方案。您将在内部展示您的导航容器和无序列表。 ul上的margin属性已设置为auto，这会将导航项目推向右侧。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将此css添加到您的代码中，并将<div class="new"> //content </div>添加到<div class="box"> </div>内，如此

    .new ul li{
      display: inline-block;
    }

＆＃13;

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;
}

.new ul li{
  display: inline-block;
}

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;
}

＆＃13;

<body>
            <div class="box-contents">
    <img src="../images/LOGO.png" alt="Stephen Crawford Photography Logo">
        </div>

<div class="box">
<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>
</div>

    <div>
        <img class="images" src="../images/DSC_7997-Edit.jpg" alt="Trevi Fountain, Rome">
        <img class="images" src="../images/DSC_1195.jpg" alt="Lake Hartwell">
        <img class="images" src="../images/DSC_7564-Edit.jpg" alt="Cinque Terre">
        <img class="images" src="../images/_DSC4277.jpg" alt="Park City">
        <img class="images" src="../images/LAC_6060.jpg" alt="Toccoa Falls">
        <img class="images" src="../images/DSC_7547-Edit.jpg" alt="Cinque Terre">
        <img class="images" src="../images/_DSC8776.jpg" alt="Campfire">
        <img class="images" src="../images/_DSC2203-Edit.jpg" alt="Milkyway">
        <img class="images" src="../images/_DSC8094-Edit.jpg" alt="Lake Hartwell">
    </div>
</body>

＆＃13;

Answer 3

使用框

在div中将div new 添加到div中

<div class="box">
   <div class="new">...</div> 
</div>

然后将.new ul替换为.new li

来更改您的CSS

.new li{
  ...
 }

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

3 个答案: