html - 是否可以对齐使它们均匀？

Question

我怎样才能做到这一点

看起来像这样：

我的意思是第二列甚至在每个类别中。我的代码如下所示：

                <div class="prod-card-fields-static col-5">
                    {[if_manufacturer]}
                    <p class="m-0">{[lang_manufacturer]}: <b>{[manufacturer]}</b></p>
                    {[/if_manufacturer]}
                    {[if_custom_field_1]}
                    <p class="m-0">{[custom_field_1_name]}: <b>{[custom_field_1]}</b></p>
                    {[/if_custom_field_1]}
                    {[if_custom_field_2]}
                    <p class="m-0">{[custom_field_2_name]}: <b>{[custom_field_2]}</b></p>
                    {[/if_custom_field_2]}
                    {[if_custom_field_3]}
                    <p class="m-0">{[custom_field_3_name]}: <b>{[custom_field_3]}</b></p>
                    {[/if_custom_field_3]}
                    {[if_category_1]}
                    <p class="m-0">{[category_1_name]}: <b>{[category_1]}</b></p>
                    {[/if_category_1]}
                    {[if_category_2]}
                    <p class="m-0">{[category_2_name]}: <b>{[category_2]}</b></p>
                    {[/if_category_2]}
                    {[if_category_3]}
                    <p class="m-0">{[category_3_name]}: <b>{[category_3]}</b></p>
                    {[/if_category_3]}
                </div>
                
            </div>```

标签： htmlcss

Answer 1

您可以将p标签包装在 a 中div并flexbox为您的div.

.labelWrapper {
  width: 50%;
  display: flex;
  justify-content: space-between;
  }

<div class="prod-card-fields-static col-5"> 
      <div class="labelWrapper">
                    <p class="m-0">lang_manufacturer: </p>
                    <p>manufacturer</p> 
      </div>
      
      <div class="labelWrapper">
                    <p class="m-0">lang_manufacturer: </p>
                    <p>manufacturer</p> 
      </div>
      
      <div class="labelWrapper">
                    <p class="m-0">lang_manufacturer: </p>
                    <p>manufacturer</p> 
      </div>
                     
</div>