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>









share|improve this question
























  • 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















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









share|improve this question
























  • 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













-1












-1








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









share|improve this 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>






css html-lists






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 15 '18 at 2:26









A J

5592620




5592620










asked Nov 14 '18 at 22:02









mdrogermdroger

11




11












  • 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
















Possible duplicate of Horizontal list items

– Patrick Q
Nov 14 '18 at 22:08





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





We need to see your CSS and rendered HTML; the PHP is irrelevant to your question

– j08691
Nov 14 '18 at 22:13












3 Answers
3






active

oldest

votes


















1














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







share|improve this answer






























    0














    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.






    share|improve this answer























    • Thanks a lot guys,

      – mdroger
      Nov 15 '18 at 19:34


















    0














    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>





    share|improve this answer






















      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















      Required, but never shown

























      3 Answers
      3






      active

      oldest

      votes








      3 Answers
      3






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      1














      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







      share|improve this answer



























        1














        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







        share|improve this answer

























          1












          1








          1







          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







          share|improve this answer













          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








          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 14 '18 at 22:28









          RyanRyan

          3169




          3169























              0














              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.






              share|improve this answer























              • Thanks a lot guys,

                – mdroger
                Nov 15 '18 at 19:34















              0














              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.






              share|improve this answer























              • Thanks a lot guys,

                – mdroger
                Nov 15 '18 at 19:34













              0












              0








              0







              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.






              share|improve this answer













              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.







              share|improve this answer












              share|improve this answer



              share|improve this answer










              answered Nov 14 '18 at 22:16









              SebastianSebastian

              426




              426












              • Thanks a lot guys,

                – mdroger
                Nov 15 '18 at 19:34

















              • Thanks a lot guys,

                – mdroger
                Nov 15 '18 at 19:34
















              Thanks a lot guys,

              – mdroger
              Nov 15 '18 at 19:34





              Thanks a lot guys,

              – mdroger
              Nov 15 '18 at 19:34











              0














              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>





              share|improve this answer



























                0














                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>





                share|improve this answer

























                  0












                  0








                  0







                  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>





                  share|improve this answer













                  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>






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 15 '18 at 19:42









                  mdrogermdroger

                  11




                  11



























                      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














                      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















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      這個網誌中的熱門文章

                      How to read a connectionString WITH PROVIDER in .NET Core?

                      Museum of Modern and Contemporary Art of Trento and Rovereto

                      In R, how to develop a multiplot heatmap.2 figure showing key labels successfully