Czy można w ten sposób wyrównać dwa znaczniki p w html i css? W jaki sposób? Dzięki!

Próbowałem z wieloma kodami css, ale nie znalazłem rozwiązania! Problem polega na tym, że drugi wiersz „Tekst tekstowy itp.” znajduje się pod datą, ale chcę dokładnie to:

2014-2020   Text Text text Text Text text Text Text text Text Text text Text Text text
            Text Text text Text Text text Text Text text Text Text text Text Text text
            Text Text text


Mój ostatni kod:

<span><strong>2014-2020</strong></span>
<span style="text-indent: 40px">Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text
Text Text text</span>
-3
Nobodyet 28 czerwiec 2021, 15:56

5 odpowiedzi

Najlepsza odpowiedź

Można to zrobić na kilka sposobów. Możesz spojrzeć na pływaki, flexbox lub siatkę. Poniżej użyłem siatki CSS:

.container {
  display: grid;
  grid-gap: 1rem;
  grid-template: 'date content';
}
<div class="container">
  <p>12-24-2021</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
2
imjared 28 czerwiec 2021, 12:59

Dla mnie najlepszym sposobem na osiągnięcie tego jest użycie flexboxa na pojemniku z tymi 2 elementami.

HTML:

<div class="wrapper">
    <span class="left"><strong>2014-2020</strong></span>
    <span class="right">Text Text text Text Text text</span>
</div>

CSS:

.wrapper {
    display: flex;
    flex-direction: row;
}

.right {
    flex-grow: 1;
    margin-left: 40px;
}

To, co możesz zrobić, aby wyrównać właściwy tekst do prawej, to dodać text-align: left do tego elementu. Powyższy kod zapewnia, że ​​data jest zawsze po lewej stronie, a drugi tekst (z klasą 'left') znajduje się po prawej stronie (z takim samym marginesem jak w twoim przykładzie).

0
SanderVanHullebusch 28 czerwiec 2021, 16:01

Istnieje co najmniej siedem różnych opcji osiągnięcia tego układu. float+flow-root, flexbox, grid, inline-block + calc, table-cell i position:absolute to sześć z nich.

Ale pokażę Ci, jak to zrobić tak, jak próbowałeś, z text-indent.

body {
  margin-left: 100px;
  text-indent: -100px;
  tab-size:4;
}
span:nth-child(2)::before {
   content:'\09';
   white-space:pre;
}
<span><strong>2014-2020</strong></span>
<span>Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text
Text Text text</span>
0
2 revs 28 czerwiec 2021, 14:17

Tabele:

<table>
  <tr>
    <td width="75">2014-2020</td>
    <td>Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text
Text Text text</td>
  </tr>
</table>
0
Spectric 28 czerwiec 2021, 13:35

Użyj elastycznego wyświetlacza

.container{

  display:flex;

}
.first{
width:20%
}
.second{
width:80%
}
<div class="container">

<span class="first"><strong>2014-2020</strong></span>
<span class="second">Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text Text Text text
Text Text text</span>

</div>
0
Shlok Jain 28 czerwiec 2021, 13:02