文章/答案/技术大牛

发布

社区首页 >问答首页 >不均匀间距与边距

问不均匀间距与边距
EN

Stack Overflow用户

提问于 2022-01-21 15:37:01

回答 2查看 72关注 0票数 0

我有困难，在项目，视频，投资组合和联系使用利润率均匀地间隔我的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>

css-position

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-01-21 16:58:06

从来没有在这种情况下使用position: absolute。通过更少的CSS，可以更容易地做到这一点：

在容器和链接div上都使用display: flex，将margin-left: auto添加到链接div以向右对齐，并在单个链接中添加一些边距，以在它们之间创建一个距离(我使用了3vw边距-左，一个相对于视口宽度的单元)。另外，将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>

票数 2

Stack Overflow用户

发布于 2022-01-21 16:06:15

下面是一个使用表标记的解决方案，该表标记是从this问题的零00ne的答案中改编的。

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%，就可以保持它们的间隔均匀。如果您添加了更多的标题，显然您需要调整它们所占的百分比。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70803850

复制

相似问题

问不均匀间距与边距
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不均匀间距与边距EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不均匀间距与边距
EN