How to display content fields horizontally?

Question

I tried to display the content of the fields horizontally but was unsuccessful. It is always the showing vertical view. Am I missing something?

This is the php code.

Thanks for the help.

<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>

Possible duplicate of [Horizontal list items](https://stackoverflow.com/questions/15710701/horizontal-list-items) — Patrick Q, Nov 14 '18 at 22:08
We need to see your CSS and rendered HTML; the PHP is irrelevant to your question — j08691, Nov 14 '18 at 22:13

score 1 · Answer 1 · answered Nov 14 '18 at 22:28

Your problem lies with your CSS and HTML output, and not necessarily the PHP generating it.

If you have access to the CSS stylesheet, you could use several methods:

Inline-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 {

}

score 0 · Answer 2 · answered Nov 14 '18 at 22:16

I'm not sure if I understood Your problem, but You are probably thinking about php like it can be used to style data generated by Your script. You need to replace <li> in Your code with <li style="float: left; margin-left: 28px;". This code uses inline CSS used for styling HTML elements like unordered list generated by Your script.

Float: https://www.w3schools.com/cssref/pr_class_float.asp
Margin: https://www.w3schools.com/cssref/pr_margin.asp

Margin is optional here, I just recommend to add this because of a little bit messy look of the list with only float applied.

score 0 · Answer 3 · answered Nov 15 '18 at 19:42

Thanks a lot Guys,

This is the code works for me:

<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>

How to display content fields horizontally?

3 Answers3