Question

我是Web开发的新手。我对自己在HTML和CSS中的知识很有信心，可以开始构建自己的网页，而且我所面临的引导很少。我的问题是关于我为自己创建的个人网页。我想在顶部有一个导航栏，该导航栏将链接到不同的页面，例如：“主页”，“关于我”，“项目”。但是我仍然很难理解如何将它们放置在我想要的位置。我的想法是使这三个字段成为列表，取出列表样式，然后将这些元素内联。但是由于某种原因，我的代码无法转换为我想要的内容，即所有3个词组都排在一行上并均匀地隔开。此外，即使我可以管理，如何控制它在向左或向右浮动或使用引导程序旁边的位置？即使效率可能较低，也有人可以向我解释只用HTML和CSS对其进行硬编码的天真的方法，以便我有所了解吗？我是否必须通过反复试验来操纵边距和填充？任何建议将不胜感激，我刚刚开始学习HTML和CSS，但我决心精通Web开发。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>First WebPage</title>
    <link rel="stylesheet" type="text/css" href = "style.css">

  </head>
  <body>
    <div class = "top-border">
      <ul class = "navbar">
        <li>Home   </li> <br>
        <li>About Me   </li> <br>
        <li>Projects   </li>
      </ul>
    </div>
  </body>
</html>

我的CSS是

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.top-border {
  width: auto;
  height: 100px;
  background-color: #D46A6A;
}

.navbar{
  float:left;
  display: inline-block;
  list-style: none;
  margin-left: 20px;
}

Answer 1

使用<br>标签不是实现布局的正确方法，请忽略它们，我使用flex，flex-box方法非常简单实用。参见下面的代码：

.navbar {
  display: flex;
  flex-direction: row;
}

有关更多样式，请使用以前的CSS。

Answer 2

要使菜单变成一行，请从列表中删除<br>并将li设置为float: left

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.top-border {
  width: auto;
  height: 100px;
  background-color: #D46A6A;
}

.navbar {
  float: left;
  display: inline-block;
  list-style: none;
  margin-left: 20px;
}

.navbar li {
  float: left;
  border-right: 1px solid yellow;
  padding: 2px 5px
}

<div class="top-border">
  <ul class="navbar">
    <li>Home </li>
    <li>About Me </li>
    <li>Projects </li>
  </ul>
</div>

Answer 3

正如您在问题中提到的，此处不使用引导程序

<div class="top-border">
    <div class="navbar">
        <a class="links" href="you can add your page links here" > Home </a>
        <a class="links" href="#" > About </a>
        <a class="links" href="#" > Project </a>
    </div>
</div>

<style>
.top-border{
   width:100%;
   height:auto;
   position:absolute; #or use float if you don't want a fixed navbar
   top:0; #add as per requirement
   left:0;
 }

 .navbar{
    height:100px;
    width:800px;
    margin-left:auto;
    margin-right:auto;
  }

  .links{
   float:left;
   height: 50px;
   width: 100px;
   padding-top: 25px;
   padding-bottom : 25px;
   text-align: center;
   text-decoration: none;
  }
</style>

此外，别忘了将身体边缘设为0。

Answer 4

我发现w3css（https://www.w3schools.com/w3css/）比Bootstrap更容易，具有足够的结构来生成您描述的布局类型，并且具有非常小的代码占用空间的优点。仅限标准CSS（无jQuery或JavaScript库）。

每个功能都链接到“ Tryit”编辑器。此链接显示您用两个单元格描述的布局。

（https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_layout_container）

   <div class="w3-cell-row">

     <div class="w3-container w3-red w3-cell">
        <p>Hello W3.CSS Layout.</p>
      </div>

      <div class="w3-container w3-green w3-cell">
        <p>Hello W3.CSS Layout.</p>
      </div>

    </div>

只需再添加一个单元格，就可以了。

 <div class="w3-cell-row">
      <div class="w3-container w3-red w3-cell">
        <p>Hello W3.CSS Layout.</p>
      </div>
      <div class="w3-container w3-green w3-cell">
        <p>Hello W3.CSS Layout.</p>
      </div>
      <!--HERE-->
      <div class="w3-container w3-green w3-cell">
        <p>Hello W3.CSS Layout.</p>
      </div>
</div>

希望这会有所帮助，祝您好运！

如何将元素放置在网页上所需的位置？

4 个答案: