时间戳

首页 > 解决方案 > 如何将元素放置在网页上所需的位置？

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

问题描述

我对网络开发很陌生。我对自己在 HTML 和CSS开始构建我的网页，我接触到的引导程序非常少。我的问题是关于我为自己构建的个人网页。我想在顶部有一个导航栏，可以链接到不同的页面，例如：“主页”、“关于我”、“项目”。但是我仍然很难理解如何将它们放置在我想要的位置。我的想法是把这 3 个字段做成一个列表，取出列表样式，然后将这些元素做成 inline-block。但由于某种原因，我的代码并没有转化为我想要的，即所有 3 个短语都在一行上并且间隔均匀。更远，即使我可以做到这一点，我如何控制它在向左或向右浮动或使用引导程序旁边的位置？HTML即使它可能效率较低，任何人都可以向我解释用 just和CSS只是让我有一个理解？我是否必须通过反复试验来操纵边距和填充？任何建议都将不胜感激，我刚刚开始学习HTML，CSS但我决心要擅长网络开发。

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

标签： htmlcss

解决方案

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

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

如需更多样式，请使用您过去的 CSS。

推荐阅读