如何对跨度保持一致的边距/填充？答案

【问题标题】：How to have consistent margin/padding against a span?如何对跨度保持一致的边距/填充？
【发布时间】：2021-07-16 17:40:48
【问题描述】：

我在p 标签中有一些文本，我希望它们再次一致地对齐它们各自的跨度文本。

这是我目前拥有的：

但我希望右侧的文本始终与左侧对齐。这就是我想要的：

这是我的代码：

<div className="basic-flex-large-gap">
  <span className="gray-dynamic">
    TRANSITION_ACCELERATE
  </span>
  <p className="span-text">
    cubic-bezier (0.4, 0, 1, 1)
  </p>
</div>

<div className="basic-flex-large-gap">
  <span className="gray-dynamic">
    TRANSITION_DECELERATE
  </span>
  <p className="span-text">
    cubic-bezier (0, 0, 0.2, 1)
  </p>
</div>

<div className="basic-flex-large-gap">
  <span className="gray-dynamic">
    TRANSITION_STANDARD
  </span>
  <p className="span-text">
    cubic-bezier (0.4, 0, 0.2, 1)
  </p>
</div>

<div className="basic-flex-large-gap">
  <span class="gray-dynamic">
    TRANSITION_SHARP
  </span>
  <p className="span-text">
    cubic-bezier (0.4, 0, 0.6, 1)
  </p>
</div>

这是我的样式：

.basic-flex-large-gap {
  display: flex;
  align-items: center;
}
.gray-dynamic {
  display: inline-block;
  background-color: #F6F8FA;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: normal;
  font-size: 16px;
  font-family: 'NMyFont', Sans-serif;
  line-height: 19px;
  color: #212121;
}
.span-text {
  font-weight: normal;
  font-family: 'MyFont', Sans-serif;
  font-size: 14px;
  line-height: 18px;
  text-align: left;
}

我不知道该怎么做。任何和所有的帮助将不胜感激，谢谢！

【问题讨论】：

是否有理由将它们分组为 div 行和列？
这是因为我希望每一行都对齐在一起。所以 TRANSITION 和它各自的三次贝塞尔曲线应该对齐在一起。这就是为什么我有 basic-flex-large-group css 规则的原因。
你为什么不试着把它们放在桌子上？
我认为一张桌子可能会更好。但是我是否也能够确保 TRANSITION 及其各自的三次贝塞尔曲线对齐在一起？

标签： javascript html css flexbox

【解决方案1】：

CSS-Tables（或实际的 table）是您的最佳选择

.basic-flex-large-gap {
  display: table-row;
}

.gray-dynamic {
  display: table-cell;
  background-color: lightgrey;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: normal;
  font-size: 16px;
  font-family: 'NMyFont', Sans-serif;
  line-height: 19px;
  color: #212121;
}

.span-text {
  display: table-cell;
  font-weight: normal;
  font-family: 'MyFont', Sans-serif;
  font-size: 14px;
  line-height: 18px;
  text-align: left;
    padding-left: 5px;
  padding-right: 15px;
}

<div class="basic-flex-large-gap">
  <span class="gray-dynamic">
    TRANSITION_ACCELERATE
  </span>
  <p class="span-text">
    cubic-bezier (0.4, 0, 1, 1)
  </p>
</div>

<div class="basic-flex-large-gap">
  <span class="gray-dynamic">
    TRANSITION_DECELERATE
  </span>
  <p class="span-text">
    cubic-bezier (0, 0, 0.2, 1)
  </p>
</div>

<div class="basic-flex-large-gap">
  <span class="gray-dynamic">
    TRANSITION_STANDARD
  </span>
  <p class="span-text">
    cubic-bezier (0.4, 0, 0.2, 1)
  </p>
</div>

<div class="basic-flex-large-gap">
  <span class="gray-dynamic">
    TRANSITION_SHARP
  </span>
  <p class="span-text">
    cubic-bezier (0.4, 0, 0.6, 1)
  </p>
</div>

【讨论】：

我最终使用了一张桌子，非常感谢。

【解决方案2】：

你可以试试css网格

.basic-flex-large-gap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.gray-dynamic {
  display: inline-block;
  background-color: #F6F8FA;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: normal;
  font-size: 16px;
  font-family: 'NMyFont', Sans-serif;
  line-height: 19px;
  color: #212121;
}
.span-text {
  font-weight: normal;
  font-family: 'MyFont', Sans-serif;
  font-size: 14px;
  line-height: 18px;
  text-align: left;
}

<div class="basic-flex-large-gap">
  <span className="gray-dynamic">
    TRANSITION_ACCELERATE
  </span>
  <p class="span-text">
    cubic-bezier (0.4, 0, 1, 1)
  </p>
</div>

<div class="basic-flex-large-gap">
  <span className="gray-dynamic">
    TRANSITION_DECELERATE
  </span>
  <p className="span-text">
    cubic-bezier (0, 0, 0.2, 1)
  </p>
</div>

<div class="basic-flex-large-gap">
  <span class="gray-dynamic">
    TRANSITION_STANDARD
  </span>
  <p className="span-text">
    cubic-bezier (0.4, 0, 0.2, 1)
  </p>
</div>

<div class="basic-flex-large-gap">
  <span class="gray-dynamic">
    TRANSITION_SHARP
  </span>
  
  <p class="span-text">
    cubic-bezier (0.4, 0, 0.6, 1)
  </p>
</div>

【讨论】：