Question

我正试图在字体真棒图标和它右边的文本段落之间保持均匀的间隔，该分隔符由分隔符（在这种情况下，是图标的right-border）分隔。

如何使图标和边框之间的距离均匀，与图标边框和文本段落之间的间隔相同？目前，我正在使用flex的space-between以及一些填充，但是空间分布不均匀，并且随着屏幕尺寸的增加，情况变得更糟。

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>

Answer 1

尝试一下。

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

等距的HTML元素

1 个答案: