Как отобразить поля содержимого по горизонтали? - PullRequest
Новая
       2

Как отобразить поля содержимого по горизонтали?

0 голосов
/ 15 ноября 2018

Я пытался отобразить содержимое полей по горизонтали, но безуспешно.Это всегда показывающий вертикальный вид.Я что-то упустил?

Это код 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>

Ответы [ 3 ]

0 голосов
/ 15 ноября 2018

Ваша проблема связана с выходными данными 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 {

}
0 голосов
/ 15 ноября 2018

Спасибо большое, ребята,

Этот код работает для меня: 

<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>
0 голосов
/ 15 ноября 2018

Я не уверен, что понял вашу проблему, но вы, вероятно, думаете о 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

Маржа здесь необязательна, я просто рекомендую добавить ее из-за немного запутанного вида списка сприменяется только поплавок.

...