时间戳

首页 > 解决方案 > 将标签和相应的文本字段与 flexbox 对齐

css - 将标签和相应的文本字段与 flexbox 对齐

问题描述

我想知道如何将标签和相应的文本字段与 flexbox 对齐。我尝试了固定宽度的方式。但它没有响应。我将在下面附上一张图片。其中我尝试使用 flexbox 对齐它们，但没有按照我想要的方式工作： 在此处输入图像描述

PS：中间的线只是我希望连字符（分隔符）对齐的指示。

HTML 代码：

   <div class="steam-ids">
  <h5 class="mb-5 section-title">STEAM ID'S</h5>
  <div class="profile-overview-steam3-id">
    <label class="name-label">
      <strong>STEAM3ID</strong>
    </label>
    <label class="data-label">
      <span class="separator">-</span>
      <%= dataObj.objSteamIds.steam3id %>
    </label>
    <span class="steam3-copy">
      <i class="far fa-clone"></i>
    </span>
  </div>
  <div class="profile-overview-steam32-id">
    <label class="name-label">
      <strong>STEAMID32</strong>
    </label>
    <label class="data-label">
      <span class="separator">-</span>
      <%= dataObj.objSteamIds.steam2id %>
    </label>
    <span class="steam32-copy">
      <i class="far fa-clone"></i>
    </span>
  </div>
  <div class="profile-overview-steam64-id">
    <label class="name-label">
      <strong>STEAMID64</strong>
    </label>
    <label class="data-label">
      <span class="separator">-</span>
      <a href="<%= dataObj.objSteamIds.steam64 %>">
        <%= dataObj.objSteamIds.steam64 %>
      </a>
    </label>
    <span class="steam64-copy">
      <i class="far fa-clone"></i>
    </span>
  </div>
  <% if(dataObj.objSteamIds.customURL){ %>
    <div class="profile-overview-customURL">
      <label class="name-label">
        <strong>CUSTOM URL</strong>
      </label>
      <label class="data-label">
        <span class="separator">-</span>
        <a href="<%= dataObj.objSteamIds.customURL %>">
          <%= dataObj.objSteamIds.customURL %>
        </a>
      </label>
      <span class="customURL-copy">
        <i class="far fa-clone"></i>
      </span>
    </div>
  <% } %>
</div>

我知道这是很多 HTML。容器内的元素周围有一个包装器，它有一个“steam-ids”类。在里面每个元素都有单独的“div”。例如。'steam3id' 有一个div，它有一个标签和一个相应的文本字段，其类为“profile-overview-steam3id”。

这是我尝试做的CSS：

.steam-ids div{
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

我对 CSS 很陌生，我正在学习如何正确对齐文本字段的任何帮助，非常感谢。我希望使用 flexbox 的最终结果看起来像这样 在此处输入图像描述

标签： cssflexbox

解决方案

推荐阅读