Php 如何按行显示HTML输出

在我使用div类的地方，每个if语句后面都有一个换行符，并且行不对齐

如何正确对齐php输出，使两行水平对齐

function display_selected_variation_custom_field_js(){
        ?>
        <script type="text/javascript">
        (function($){
            var a = '.custom_variation-text-field', b = $(a).html();
    
            $('form.cart').on('show_variation', function(event, data) {
                outputHtml = '';
    
                if( data.model ) {
                    outputHtml += '<div align="left"> <span><strong><?php _e("Model"); ?><strong>: '+data.model+'<span></div>';
                }
                if( data.wattage ) {
                    outputHtml += '<div align="center"><span><strong><?php _e("Wattage"); ?><strong>: '+data.wattage+'<span></div>';
                }
                if( data.lumen ) {
                    outputHtml += '<div align="right"><span><strong><?php _e("Lumen"); ?><strong>: '+data.lumen+'<span></div>';
                }
                if( data.material ) {
                    outputHtml += '<div align="left"><span><strong><?php _e("Material"); ?><strong>: '+data.material+'<span></div>';
                }
                if( data.dimension ) {
                    outputHtml += '<div align="center"><span><strong><?php _e("Dimension"); ?><strong>: '+data.dimension+'<span></div>';
                }
                if( data.year ) {
                    outputHtml += '<div align="right"><span><strong><?php _e("Year"); ?><strong>: '+data.year+'<span></div>';
                }
                if( outputHtml ) {
                    $(a).html(outputHtml);
                }
            }).on('hide_variation', function(event) {
                $(a).html(b);
            });
        })(jQuery);
        </script>

函数显示\选定\变量\自定义\字段\ js（）{
?>
（函数（$）{
var a='.custom_variation-text-field'，b=$（a.html（）；
$（'form.cart'）。on（'show_variation'，函数（事件，数据）{
outputHtml=''；
if（data.model）{
outputHtml+='：'+data.model+''；
}
if（数据瓦数）{
outputHtml+='：'+data.wattage+''；
}
if（数据流明）{
outputHtml+='：'+data.lumen+''；
}
如果（数据材料）{
outputHtml+='：'+data.material+''；
}
if（data.dimension）{
outputHtml+='：'+data.dimension+''；
}
if（data.year）{
outputHtml+='：'+data.year+''；
}
if（outputHtml）{
$（a）.html（outputHtml）；
}
}).on（'hide_variation'，函数（事件）{
$（a）.html（b）；
});
})（jQuery）；

电流输出：

预期产出：

是，默认情况下，s是块标记，而不是内联标记

要做到这一点，最简单的方法是使用。这目前并不“酷”，但它确实解决了问题。另一种方法是使用CSS的“float”属性：

<div style='clear: both; float: left'>Left side</div>
<div style='float: center'>Center</div>
<div style='float: right'>Right side</div>

左侧
居中
右侧

您可能希望使用类，而不是像这样指定CSS

---

请注意，您的第二个和标记都应该是结束标记：和，尽管我不知道为什么会有。

您可以为数据提供一些外部div，因为您的代码在单独的行中显示所有内容，这将有助于区分它们

演示代码：

var a='.custom_variation-text-field'；
//假设数据如下所示。。
风险值数据={
“模型”：13，
“流明”：“某物”，
“材料”：122，
“维度”：12，
“年份”：1333年，
“瓦数”：33
}
var outputHtml=''；
//给一些外部div来区分它们
var outer=“”
if（data.model）{
外部+='模型：'+data.Model+''；
}
if（数据瓦数）{
外部+='瓦数：'+data.Wattage+''；
}
if（数据流明）{
外部+='流明：'+data.Lumen+''；
}
outer+=outputHtml+//关闭它
if（数据材料）{
外部+='材料：'+data.Material+''；
}
if（data.dimension）{
外部+='维度：'+data.Dimension+''；
}
如果（数据年）{
外部+='年份：'+data.Year+''；
}
外部+=“”
如果（外部）{
$（a）.html（外部）；
}

.outer>*{
显示：内联块；
宽度：150px；
高度：30px；
边框底部：2倍实心；
}

这对我不起作用。两个中心值都已左对齐并在新行上对齐。解决方案是什么？

左侧中心能否显示例外输出？是-请查看显示预期输出的链接：