Question

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

这是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样式表，则可以使用以下几种方法：

内联屏蔽

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
}

浮动

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 {

}

Answer 2

我不确定我是否理解您的问题，但是您可能正在考虑php，因为它可以用来设置脚本生成的数据的样式。您需要用<li>替换代码中的<li style="float: left; margin-left: 28px;"。这段代码使用内联CSS来样式化HTML元素，例如您的脚本生成的无序列表。

浮动：https://www.w3schools.com/cssref/pr_class_float.asp
保证金：https://www.w3schools.com/cssref/pr_margin.asp

这里的边距是可选的，我只建议添加此边距，因为列表的外观有些混乱，只应用了浮点数。

Answer 3

非常感谢你们，

这是对我有用的代码：

<head>
<style>
 .flex-container {
 display: flex;
 flex-wrap: nowrap;
 background-color: white; 
 }

 .flex-container > div {
  background-color: #e8f3ff;
   width: 1px;
   margin: 10px;
   text-align: center;
   line-height: 55px;
   font-size: 30px;
   }
   </style>

   </head>
   <body>
   <h4>Details</h4>

    <div class="flex-container">

    <?php foreach ($custom_fields['quote'] as $custom_quote_field_name => 
    $custom_quote_field_value) : ?>

    <?php echo $custom_quote_field_name; ?> <?php echo $custom_quote_field_value; ?>



    <?php endforeach; ?>
   </div>
   </body>

如何水平显示内容字段？

3 个答案: