Divs間距與邊距不均勻-有解無憂

我無法使用邊距均勻分布專案、視頻、投資組合和聯系人的 div。我希望它從螢屏右側開始均勻間隔。但我沒有使用像素值作為間距，因為我想盡可能避免硬編碼數字。我也意識到我設計導航欄的方式并不是最有效的。

Divs 間距與邊距不均勻

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>

uj5u.com熱心網友回復：

永遠不要position: absolute用于這種情況。這可以用更少的 CSS 更容易地完成：

display: flex在容器和鏈接 div 上同時使用，添加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>

uj5u.com熱心網友回復：

這是一個使用表格標簽的解決方案，我改編自 zer00ne 對這個問題的回答。

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>

為每個標題使用一列，然后將它們均勻地間隔 20%，這將使它們保持均勻間隔。如果您添加了更多標題，顯然您需要調整它們之間的百分比。

以下是有關 table 標記的更多資訊：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/418610.html

標籤：

上一篇：使用動態url(React.js)在tailwindcss中的背景圖片

下一篇：使用CTE插入表