css - 如何水平显示内容字段？

Question

我试图水平显示字段的内容，但没有成功。它始终是显示的垂直 View 。我错过了什么吗？

这是 php 代码。

感谢您的帮助。

<h3>Details</h3>
<ul>
    <?php foreach ($custom_fields['quote'] as $custom_quote_field_name => $custom_quote_field_value) : ?>
    <li><?php echo $custom_quote_field_name; ?> : <?php echo $custom_quote_field_value; ?></li>
    <?php endforeach; ?>
</ul>

Answer 1

您的问题在于您的 CSS 和 HTML 输出，而不一定是生成它的 PHP。

如果您有权访问 CSS 样式表，则可以使用多种方法:

行内 block

ul {
    font-size: 0; 
    /*makes inline-block method work, as " " in your DOM have a font-size,
      and we want to eliminate those
    */
}
ul li {
    font-size: 18px; //or however large you would like
    display: inline-block;
    width: calc(100% / X); //where X is number of li
}

float

ul {

}
ul li {
    font-size: 18px; //or however large you would like
    float: left;
    margin-left: X; //where X is the gap you want between elements
}

flexbox

ul {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
ul li {

}