How to display content fields horizontally?

-1

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>

edited Nov 15 '18 at 2:26

A J

5592620

asked Nov 14 '18 at 22:02

mdroger

Possible duplicate of 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

add a comment |

-1

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>

edited Nov 15 '18 at 2:26

A J

5592620

asked Nov 14 '18 at 22:02

mdroger

Possible duplicate of 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

add a comment |

-1

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>

edited Nov 15 '18 at 2:26

A J

5592620

asked Nov 14 '18 at 22:02

mdroger

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>

css html-lists

edited Nov 15 '18 at 2:26

A J

5592620

asked Nov 14 '18 at 22:02

mdroger

edited Nov 15 '18 at 2:26

A J

5592620

asked Nov 14 '18 at 22:02

mdroger

edited Nov 15 '18 at 2:26

A J

5592620

edited Nov 15 '18 at 2:26

A J

5592620

edited Nov 15 '18 at 2:26

A J

5592620

asked Nov 14 '18 at 22:02

mdroger

asked Nov 14 '18 at 22:02

mdroger

asked Nov 14 '18 at 22:02

mdroger

Possible duplicate of 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

add a comment |

Possible duplicate of 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

Possible duplicate of 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

add a comment |

3 Answers
3

active

oldest

votes

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

answered Nov 14 '18 at 22:28

Ryan

3169

add a comment |

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.

answered Nov 14 '18 at 22:16

Sebastian

426

Thanks a lot guys,

– mdroger
Nov 15 '18 at 19:34

add a comment |

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>

answered Nov 15 '18 at 19:42

mdroger

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53309398%2fhow-to-display-content-fields-horizontally%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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

answered Nov 14 '18 at 22:28

Ryan

3169

add a comment |

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

answered Nov 14 '18 at 22:28

Ryan

3169

add a comment |

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

answered Nov 14 '18 at 22:28

Ryan

3169

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

answered Nov 14 '18 at 22:28

Ryan

3169

answered Nov 14 '18 at 22:28

Ryan

3169

answered Nov 14 '18 at 22:28

Ryan

3169

answered Nov 14 '18 at 22:28

Ryan

3169

add a comment |

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.

answered Nov 14 '18 at 22:16

Sebastian

426

Thanks a lot guys,

– mdroger
Nov 15 '18 at 19:34

add a comment |

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.

answered Nov 14 '18 at 22:16

Sebastian

426

Thanks a lot guys,

– mdroger
Nov 15 '18 at 19:34

add a comment |

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.

answered Nov 14 '18 at 22:16

Sebastian

426

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.

answered Nov 14 '18 at 22:16

Sebastian

426

answered Nov 14 '18 at 22:16

Sebastian

426

answered Nov 14 '18 at 22:16

Sebastian

426

answered Nov 14 '18 at 22:16

Sebastian

426

Thanks a lot guys,

– mdroger
Nov 15 '18 at 19:34

add a comment |

Thanks a lot guys,

– mdroger
Nov 15 '18 at 19:34

Thanks a lot guys,

– mdroger
Nov 15 '18 at 19:34

add a comment |

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>

answered Nov 15 '18 at 19:42

mdroger

add a comment |

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>

answered Nov 15 '18 at 19:42

mdroger

add a comment |

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>

answered Nov 15 '18 at 19:42

mdroger

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>

answered Nov 15 '18 at 19:42

mdroger

answered Nov 15 '18 at 19:42

mdroger

answered Nov 15 '18 at 19:42

mdroger

answered Nov 15 '18 at 19:42

mdroger

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Myujth