將彈性專案與容器外的其他<span>水平對齊-有解無憂

我正在設計一個網站。在“電子郵件帖子模擬器”中，每個帖子都是帶有名稱和標題的新電子郵件。我必須對齊標題，使其與其他行的開頭相匹配。

我嘗試將名稱和標題封裝在一個容器中以單獨處理它們。它沒有用

它周圍的元素沒有任何影響它的邊距。

我正在尋找的外觀

我的網

<div class="alerts-messaging-container-person">
        <input type="checkbox" class="check-all">
        <span class="not-selected"></span>
        <span class="contact-name">Richard Channing</span>
        <span class="email-name">Memorial Clinic</span>
        <span class="date">12 April 2014</span>
        <button><img src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png" /></button>
    </div>

    <div class="alerts-messaging-container-person">
        <input type="checkbox" class="check-all">
        <span class="not-selected"></span>
        <span class="contact-name">Elisabeth Bale</span>
        <span class="email-name">From Connecticut</span>
        <span class="date">21 June 2013</span>
        <button><img src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png" /</button>
    </div>

    <div class="alerts-messaging-container-person">
        <input type="checkbox" class="check-all">
        <span class="not-selected"></span>
        <span class="contact-name">Sarah Connor</span>
        <span class="email-name">Cyberdyne Systems</span>
        <span class="date">20 June 2013</span>
        <button><img src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png" /</button>
    </div>


.alerts-messaging-container-person {
width: 1000px;
margin: auto;
display: flex;
align-content: flex-end;
gap: 30px;
border: 1px solid rgb(204, 203, 203);


.alerts-messaging-container-person span {
    align-self: center;
    font-size: 1.2em;

}

uj5u.com熱心網友回復：

您可以使用display: grid;容器將這些列設定為固定寬度，以便它們沿行一致地對齊。

本演示中使用的網格模板是：auto auto 35% 35% 10em auto;

.alerts-messaging-container-person {
  width: 100%;
  margin: auto;
  display: grid;
  border: 1px solid rgb(204, 203, 203);
  grid-template-columns: auto auto 35% 35% 10em auto;
}


.alerts-messaging-container-person span {
  align-self: center;
  font-size: 1.2em;
}

img{
  width: 30px;
}

<div class="alerts-messaging-container-person">
  <input type="checkbox" class="check-all">
  <span class="not-selected"></span>
  <span class="contact-name">Elisabeth Bale</span>
  <span class="email-name">From Connecticut</span>
  <span class="date">21 June 2013</span>
  <button>
    <img
      src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png"/>
  </button>
</div>

<div class="alerts-messaging-container-person">
  <input type="checkbox" class="check-all">
  <span class="not-selected"></span>
  <span class="contact-name">Sarah Connor</span>
  <span class="email-name">Cyberdyne Systems</span>
  <span class="date">20 June 2013</span>
  <button>
    <img
      src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png" />
  </button>
</div>

uj5u.com熱心網友回復：

將前三個孩子<div>放入一個新的<div>.

<div>
    <input type="checkbox" class="check-all">
    <span class="not-selected"></span>
    <span class="contact-name">Richard Channing</span>
</div>

現在，由于所有的孩子都向左對齊，但是我們希望它們之間有一個間隙而不弄亂其他每個<div>s 的對齊方式，我們使用flex-basis.

.alerts-messaging-container-person * {
  flex-basis: 25%;
}

后提及該類選擇該類的父級的*所有子級。

這是codepen的鏈接

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/476396.html

標籤：html css

上一篇：填充在水平線csshtml中不起作用

下一篇：如何將小部件與螢屏中心對齊