Блог

У меня есть куча выходных данных html, которые я получаю следующим образом

 <div>
<h4>This</h4><p>Value 9.6 m.</p>
<h4>That</h4><p>Value 9.6 m.</p>
<h4>The other</h4><p>Another 7.69 m.</p>
<h4>And yet</h4><p>Another value 4.8 m.</p>
</div>
 

и я хочу, чтобы он отображался примерно так

Это: значение 9,6 м.

Это: значение 9,6 м.

Другое: еще 7,69 м.

И еще: другое значение 4.8 m.

Я думаю, что это, вероятно, должно было быть создано как список определений, но я не контролирую генерацию html.

Я могу заставить первый «блок» h4 p правильно отображаться следующим образом, но, похоже, я не могу заставить последующие «блоки» отображаться по желанию.

 h4:after {
 content: ": ";
 display: inline;
 white-space: nowrap;
 } 
h4 {
 display: block; }
h4~p {
 display: block; }
    
    
h4:first-child { 
display: inline;}
h4 p {
 display: inline;
 }
 

Любые предложения о том, как добиться желаемого результата?

TIA

Если вам не нужен аккуратный макет столбца или сетки для них, я обнаружил, что старые поплавки работают лучше всего:

 // normalize the spacing and stuff between the h4 and p
h4, p {
    display: block;
    line-height: 1.4;
    padding: 0;
    margin: 0;
}

h4 {
    // honestly, this got the most sturdy result
    float: left;

    // add the colon and a  little space
    amp;:after {
        content: ": ";
        margin-right: 10px;
    }
}

// break the line after each P
p {
    amp;:after {
        display: block;
        clear: right;
        content: "";
    }
}
 

Я также добавил это в CodePen.

Также, если вам нужна более табличная или столбчатая версия, мне повезло с flexbox и css grid.

Надеюсь, это поможет, счастливого кодирования!