Question

我想知道是否有人可以帮我解决我遇到的问题。我想要文本＆＃34; Liam的数字作品集＆＃34;根据导航栏文本位于顶部网页的中心。此外，我希望导航栏位于最右侧的角落，如codepen链接http://codepen.io/ldocherty1/pen/qRowVK中所示。

我刚开始编程，这是我的第二天，我真的想改进，如果代码的结构不正确，请道歉。

下面是我的HTML代码，如果需要，在codepen中是我的CSS。

<div id="Navagationbar">
   <ul>
  <li><b><a href="#">HomePage</a></b></li>
  <li><b><a href="#">Portfolio</a></b></li>
  <li><b><a href="#">Contact Us</a></b></li>
  <li><b><center>Liam's Digital Portfolio<center></b></li>
   </ul>
 </div>
     </body>
</html>

谢谢，小连

Answer 1

我祝你在编码过程中一切顺利:)我会给你一个简单的解决方案来获得理想的效果。首先，在css中切掉身体的填充顶部：

padding-top: 180px;

现在从你的html中删除

  <li><b><center>Liam's Digital Portfolio<center></b></li>

由于这是您的页面标题，因此标准做法是将其放在h1标签内。然后我们可以用简单的CSS中心。 html将如下所示：

<h1 class="title">Liam's Digital Portfolio</h1>       

<div id="Navagationbar">
 <ul>
  <li><b><a href="#">HomePage</a></b></li>
  <li><b><a href="#">Portfolio</a></b></li>
  <li><b><a href="#">Contact Us</a></b></li>
 </ul>
</div>

现在我们可以简单地将其添加到css

.title{text-align:center;}

删除了填充顶部并添加了此标题后，标题将位于页面的中心，与导航栏一致。我发现你的css有很多问题所以我建议你通过一个很好的教程，比如来自w3schools http://www.w3schools.com/css/的这个教程。我希望这有帮助，祝你好运！

Answer 2

如下所示进行HTML更改

        <ul>
          <li><b><a href="#">HomePage</a></b></li>
          <li><b><a href="#">Portfolio</a></b></li>
          <li><b><a href="#">Contact Us</a></b></li>
          <li style="position:absolute;right:45%"><b><a href="#">Liam's Digital Portfolio</a></b></li>
       </ul>

CSS更改如下

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}



    h1 {
    font-family:Arial;
    color:white;
    font-size:10pt;
    text-align:center;
    }

    li a:hover:not(.active) {
    background-color:grey;
}

   #Navagationbar {
   font-family:Arial;
   color:white;
   font-size:10pt;
   text-align:center;

}

   #Navagationbar ul {
   list-style:none;
   float:right;
   margin:0;
   padding:0;

}
   #Navagationbar ul li {
   display:block;
   list-style:none;
   margin:0;
   padding:0;


}

#Navagationbar ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   color:white;;
   text-decoration:none;
   line-height:1.3em;

}
#Navagationbar ul li a:hover {
   color:white;
}
#Navagationbar ul li a.active,
#Navagationbar ul li a.active:hover {
   color:white;

}

body {
  margin:0;
}
.page{
  min-height:-590px;
  background:linear-gradient(45deg, #999, #FFF);
}
#footer{
  list-style:none inside none;
  margin:0;
  padding:0;
  position:fixed;
  right:0;
  bottom:0;
  left:0;
  height:50px;
  background-color:#1f1f1f;
  font-size:0;
}
#footer li {
  font-family:Arial;
  float: right;
  color:white;
  font-size:10pt;
  display:inline-block;
  text-align:center;
  height:50px;
  padding:0 20px;
  line-height:3.3;
  border-right:1px solid #000;
  border-left:1px solid #333;
}
#footer li {
  font-family:Arial;
  float: left;
  color:white;
  font-size:10pt;
  display:inline-block;
  text-align:center;
  height:50px;
  padding:0 20px;
  line-height:3.3;
  border-right:1px solid #000;
  border-left:1px solid #333;
}


#footer li:last-child {
  border-right:0;
}

    body {
        background:url('https://static.pexels.com/photos/34088/pexels-photo.jpg');
            position:static;
            height:400px; 
            background-attachment:fixed;
            background-repeat:no-repeat;
            background-size:cover;

        }

如何在导航栏上排列文本？

2 个答案: