将不同的类添加到标签和值并在同一行输出答案

【问题标题】：Add different classes to label and value and output on same line将不同的类添加到标签和值并在同一行输出
【发布时间】：2020-06-08 21:29:36
【问题描述】：

我正在尝试向标签和值添加不同的类，以便我可以对它们进行不同的样式设置，但需要做两件事。

添加一条在两者下方延伸的边框底部
在同一行显示标签名称和值

这是我正在使用的 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

名称：值

所以每个标签和值都内联显示

【问题讨论】：

标签： php html css forms

【解决方案1】：

这感觉更像是一个CSS 问题：我会使用一个弹性容器来设置输出的样式以容纳所有property-details 项目，并且每个property-details 上也有一个弹性容器。外部容器使用 flex-direction: column 创建堆叠的垂直对齐方式，内部 flex 项使用 flex 的默认行方向将两个 divs 保持在同一行。

.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

【讨论】：

是的，但它也涉及 PHP，因为我需要修改默认标记。
@Dev 没错，您必须将包装 div 添加到 PHP。我说，保持内联样式干净并添加更多CSS。这就是您正确扩展事物的方式。
同意，但是您如何看待这个答案stackoverflow.com/a/60389750/4643292，一旦您将每个细节都包装在一个 div 中，它就会起作用？
另外，如果我想为每个标签和值的每个细节添加一个唯一的类怎么办？我如何使用 foreach 做到这一点？
@Dev 我的 PHP 技能确实很差。但似乎你可以这样做：stackoverflow.com/a/11852517/949217

【解决方案2】：

试试这个..

$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;

【讨论】：

这两个问题是它们在同一行显示所有标签和值。我会更新问题。
@Dev 对多行使用br 标签。查看我的更新答案
更好，但不允许我在两者下方添加连续边框。

【解决方案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;

【讨论】：