php - 如何在行中显示 HTML 输出

Question

在我使用 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>

电流输出：

预期输出：

标签： phphtmljquery

Answer 1

是的，默认情况下 <div> 是块标记，而不是内联标记。

执行此操作的简单方法是使用 <table>。这目前并不“酷”，但它确实解决了问题。另一种方法是使用 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。

请注意，您的第二个 <strong> 和 <span> 标记都应该是结束标记：</strong> 和 </span>，尽管我不确定为什么会有 <span>。