时间戳

首页 > 解决方案 > 均匀分布的 HTML 元素

html - 均匀分布的 HTML 元素

问题描述

我试图在字体真棒图标和它右边的文本段落之间获得均匀的空间，它由分隔线分隔（在这种情况下，right-border图标的）。

如何使图标与其边框之间的空间均匀，与图标边框和文本段落之间的空间相同？我space-between目前正在使用 flex 以及一些填充，但是空间分布不均匀，并且随着屏幕大小的调整变得更糟。

body {
  height: 100vh;
  width: 100%;
}

#container {
  height: 90%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#display {
  height: 76%;
  width: 100%;
  background-color: #ECECEC;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
  height: 100%;
  width: 95%;
}

.content i {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid black;
}

.text {
  width: 50%;
  justify-content: center;
  align-items: center;
  padding: 0 6%;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div id="container">
  <div id="display">
    <div class="content">
      <i class="fas fa-balance-scale fa-7x"></i>
      <div class="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque volutpat libero, at venenatis dolor rutrum vel. Donec fermentum eleifend tortor, at sollicitudin est rutrum nec. Fusce eget vehicula ex. Vestibulum semper gravida nulla, in aliquam ipsum dignissim nec.</p>
      </div>
    </div>
  </div>
</div>

标签： htmlcss

解决方案

尝试这个。

.content i {
  padding-right: 35px;
}

推荐阅读