Добавить разные классы для метки, значения и вывода в одной строке

Question

Я пытаюсь добавить разные классы к метке и значению, чтобы я мог стилизовать их по-разному, но мне нужно сделать 2 вещи.

1. Добавить линию border-bottom, которая проходит под обоими
2. отображает название и значение метки в одной строке

Вот PHP Я работаю с

$output .= '<div class="property-details">';

foreach ( (array) $this->property_details as $label => $key ) {
$output .= sprintf( '<div class="label">%s</div><div class="value">%s</div>', $label, $value ) );
        }
$output .= '</div>';
return $output;

Это дает мне следующее:

Цена:

10 000 000

Что мне нужно, это

Цена: 10 000 000

Имя: Значение

Таким образом, каждая метка и значение отображаются в строке

Answer 1

Попробуйте это ..

$output .= '<div class="property-details">';

foreach ( (array) $this->property_details as $label => $key ) {
$output .= sprintf( '<div class="label" style="display: inline-block;">%s</div><div class="value" style="display: inline-block;">%s</div>', $label, $value ) );
        }
$output .= '</div>';
return $output;

Хотя, если вы не используете какую-либо библиотеку, такую ​​как Bootstrap, я рекомендую вам использовать span вместо:

$output .= '<div class="property-details">';

foreach ( (array) $this->property_details as $label => $key ) {
$output .= sprintf( '<span class="label" >%s</span ><span class="value">%s</span >', $label, $value ) );
        }
$output .= '</div>';
return $output;

Использовать br метки для мультилиней:

$output .= '<div class="property-details">';

foreach ( (array) $this->property_details as $label => $key ) {
$output .= sprintf( '<span class="label" >%s</span ><span class="value">%s</span > <br>', $label, $value ) );
        }
$output = substr_replace($output , '', strrpos($output , '<br>'), 4);
$output .= '</div>';
return $output;

Answer 2

Это больше похоже на вопрос CSS: я бы придал стилю выходной результат гибкий контейнер для размещения всех элементов property-details, а также гибкий контейнер для каждого property-details. Внешний контейнер создает сложенное вертикальное выравнивание, используя flex-direction: column, а внутренние элементы flex сохраняют оба значения div s на одной линии, используя стандартное направление строки flex.

.property-details-container {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.property-details {
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid;
  margin-bottom: 0.5rem;
}

.property-details .value {
  font-weight: bold;
  padding-left: .5rem;
}

<div class="property-details-container">
  <div class="property-details">
    <div class="label">Price</div>
    <div class="value">10,000</div>
  </div>
  <div class="property-details">
    <div class="label">Year Built</div>
    <div class="value">1982</div>
  </div>
</div>

jsFiddle

Answer 3

Вы можете попробовать это:

$output .= '<div class="property-details">';

foreach ( (array) $this->property_details as $label => $key ) {
$output .= sprintf( '<span class="label">%s</span><span class="value">%s</span>', $label, $value ) );
        }
$output .= '</div>';
return $output;