How to align <hr> elements inline if text is different length before it

问题

(This proposed suggestion wasn't what I was looking for)

I have problem with having <hr> elements right after a title and text elements that is repeated by ACF in PHP. Different sizes of titles and text that are printed cause problems with the <hr> element being shown vertically in different places. When I want them to be inline with each other.

Here is pic for the current result explaining more the situation: mysituation

And code for this part:

<h2 class="entry-title py-3 text-center"><?php echo $title; ?></h2>
<?php echo $text; ?></p>
<hr class="hr-customcolor" />

回答1:

It can be done with the help of grid technique.

.row {
  display: grid;
  grid-auto-flow: column;
  gap: 5%;
}

.col {
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
</div>

回答2:

From info of the duplicate, you may also use a built-in flex classes.

here an example :

/* CSS example that could be classes */
ul {
  margin: 0;  /* bs4 class is m-0*/
}
/* or */
 ul {
  margin: auto 0;  /*bs4 class are  mx-0 my-auto */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid row  justify-content-center">
    <div class="d-flex flex-column m-2 col-lg-3 border border-secondary">
      <h2 class="text-primary">3 col run on full page mode</h2>
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>
      <hr class="hr-customcolor mt-auto w-100 border border-primary" />
      <button type="button" class="btn btn-primary my-1  mx-auto">Primary</button>
    </div>
    <div class="d-flex flex-column m-2 col-lg-3 border border-secondary">
      <h2 class="text-primary">title</h2>
      <ul>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>
      <hr class="hr-customcolor mt-auto w-100 border border-primary" />
      <button type="button" class="btn btn-primary my-1  mx-auto">Primary</button>
    </div>
    <div class="d-flex flex-column m-2 col-lg-3 border border-secondary">
      <h2 class="text-primary">title</h2>
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
      </ul>
      <hr class="hr-customcolor mt-auto w-100 border border-primary" />
      <button type="button" class="btn btn-primary my-1  mx-auto">Primary</button>
    </div>
    <div class="d-flex flex-column m-2 col-lg-3 border border-secondary">
      <h2 class="text-primary">title</h2>
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>
      <hr class="hr-customcolor mt-auto w-100 border border-primary" />
      <button type="button" class="btn btn-primary my-1  mx-auto">Primary</button>
    </div>
    <div class="d-flex flex-column m-2 col-lg-3 border border-secondary">
      <h2 class="text-primary">title</h2>
      <ul>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>
      <hr class="hr-customcolor mt-auto w-100 border border-primary" />
      <button type="button" class="btn btn-primary my-1  mx-auto">Primary</button>
    </div>
    <div class="d-flex flex-column m-2 col-lg-3 border border-secondary">
      <h2 class="text-primary">title</h2>
      <ul>
        <li>Vestibulum auctor dapibus neque.</li>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>
      <hr class="hr-customcolor mt-auto w-100 border border-primary" />
      <button type="button" class="btn btn-primary my-1  mx-auto">Primary</button>
    </div>
  </div> 

来源：https://stackoverflow.com/questions/65950398/how-to-align-hr-elements-inline-if-text-is-different-length-before-it