Div 的边距不均匀

Question

我无法使用边距均匀地分隔项目、视频、投资组合和联系人的 div。我希望它从屏幕右侧开始均匀间隔。但我没有使用像素值作为间距，因为我想尽可能避免硬编码数字。我还意识到我设计导航栏的方式并不是最有效的。

body {
  background-color: black;
  margin: 0px;
  font-family: "Caveat", cursive;
  font-family: "Ubuntu", sans-serif;
}

.title-bar {
  height: 14%;
  width: 100%;
  position: relative;
  color: white;
  font-size: 30px;
}

.title-icon {
  position: absolute;
  margin-left: 5%;
}

.title-links {
  position: relative;
  right: 0px;
  top: 0px;
  margin-right: 5%;
}

.title-1 {
  position: absolute;
  right: 0px;
  margin-right: 45%;
}

.title-2 {
  position: absolute;
  right: 0px;
  margin-right: 30%;
}

.title-3 {
  position: absolute;
  right: 0px;
  margin-right: 15%;
}

.title-4 {
  position: absolute;
  right: 0px;
  margin-right: 0;
}

.title-link {
  color: white;
  text-decoration: none;
}

.title-link:hover {
  color: rgb(0, 63, 145);
  text-decoration: none;
}

<div class="title-bar">
  <div class="title-icon">
    <h3>Rupak Y</h3>
  </div>
  <div class="title-links">
    <div class="title-1">
      <a class="title-link" href="#">
        <h3>Projects</h3>
      </a>
    </div>
    <div class="title-2">
      <a class="title-link" href="#">
        <h3>Videos</h3>
      </a>
    </div>
    <div class="title-3">
      <a class="title-link" href="#">
        <h3>Portfolio</h3>
      </a>
    </div>
    <div class="title-4">
      <a class="title-link" href="#">
        <h3>Contact</h3>
      </a>
    </div>
  </div>

Answer 1

这是一个使用 table 标签的解决方案，我改编自 zer00ne 在 this 问题中的回答。

html,
body {
  background-color: black;
  margin: 0px;
  font-family: "Caveat", cursive;
  font-family: "Ubuntu", sans-serif;
}

table {
  width: 100%;
  table-layout: fixed;
}

th {
  width: 20%
}

<html>
  <head>
    <title>Rupak Yeware - Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="CSS/styles.css" />
  </head>
  <body>
    <table class='table table-striped jambo_table'>
          <th class='column-title' style="color:white">Rupak Y</th>
          <th class='column-title' style="color:white"><a href="#;">Projects</a></th>
          <th class='column-title' style="color:white"><a href="#;">Videos</a></th>
          <th class='column-title' style="color:white"><a href="#;">Portfolio</a></th>
          <th class='column-title no-link last' style="color:white"><span class='nobr'><a href="#;">Contact</a></span></th>
    </table>
  </body>
</html>

为每个 headers 使用一列，然后将它们均匀间隔 20% 将使它们保持均匀间隔。如果您添加更多 headers，显然您需要调整它们的间距百分比。

这里是关于 table 标签的更多信息：

https://www.w3schools.com/tags/tag_table.asp

Answer 2

永远不要在这种情况下使用position: absolute。这可以更容易地完成，而且更少 CSS:

在容器和链接 div 上都使用 display: flex，将 margin-left: auto 添加到链接 div 以使其正确对齐并为单个链接添加一些边距在它们之间创建一个距离（我使用了 3vw margin-left，一个相对于视口宽度的单位）。此外，将 display: block 应用于 a 标签，使它们像块一样运行，并在容器上使用左和右 padding 来创建文本在左侧和右侧的偏移量。

body {
  background-color: black;
  margin: 0px;
  font-family: "Caveat", cursive;
  font-family: "Ubuntu", sans-serif;
}

.title-bar {
  display: flex;
  height: 14%;
  color: white;
  font-size: 18px;
  padding: 0 3%;
}

.title-links {
  margin-left: auto;
  display: flex;
}

.title-link {
  display: block;
  margin-left: 3vw;
  color: white;
  text-decoration: none;
}

.title-link:hover {
  color: rgb(0, 63, 145);
  text-decoration: none;
}

<div class="title-bar">
  <div class="title-icon">
    <h3>Rupak Y</h3>
  </div>
  <div class="title-links">
    <div class="title-1">
      <a class="title-link" href="#">
        <h3>Projects</h3>
      </a>
    </div>
    <div class="title-2">
      <a class="title-link" href="#">
        <h3>Videos</h3>
      </a>
    </div>
    <div class="title-3">
      <a class="title-link" href="#">
        <h3>Portfolio</h3>
      </a>
    </div>
    <div class="title-4">
      <a class="title-link" href="#">
        <h3>Contact</h3>
      </a>
    </div>
  </div>

Div 的边距不均匀

Divs not spacing evenly with margins

html

css

css-position