How to change this code to show blocks in-line?

Question

I have php code:

<?php
function metro_page_card($page) {
    $html = "\t<li>\n\t\t<a href=\"".get_page_link($page->ID)."\">\n";
    $icon = get_post_meta($page->ID, "Icon", true);
    $html .= "\t\t\t".wp_get_attachment_image($icon, array('96', '96'))."\n";
    $html .= "\t\t\t<p>".$page->post_title."</p>\n";
    $html .= "\t\t\tSome text\n";
    $html .= "\t\t</a>\n\t</li>\n";
    return $html;
}

//[child_pages]
function metro_child_pages() {
    $id = get_the_ID();
    $pages = get_pages(array('child_of' => $id));
    $html = "<ul class=\"page_card_grid\">\n";

    foreach($pages as $page) {
        $html .= metro_page_card($page);
    }

    $html .= "</ul>\n";

    return $html;
}

add_shortcode('child_pages', 'metro_child_pages');
?>

Rendered html source:

ul.page_card_grid li {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 20px;
}

ul.page_card_grid li a {
  display: inline-block;
  color: #555;
  width: 200px;
  height: 200px;
  padding: 20px 16px 16px 16px;
  font-size: 16px;
  text-decoration: none;
  background-color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

ul.page_card_grid li a p {
  margin: 8px 0 8px 0;
  font-size: 20px;
  text-align: center;
}

ul.page_card_grid li a img {
  margin: 0 52px 0 52px;
}

ul.page_card_grid li a:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

<ul class="page_card_grid">
  <li>
    <a href="http://local/index.php/sample-page/child-page-1/">
      <img width="96" height="96" src="http://local/wp-content/uploads/2016/05/ic-1-150x150.png" class="attachment-96x96 size-96x96" alt="ic_timetable" srcset="http://local/wp-content/uploads/2016/05/ic-1-150x150.png 150w, http://local/wp-content/uploads/2016/05/ic-1.png 256w" sizes="(max-width: 96px) 100vw, 96px" />
      <p>Child page 1</p>
      Some text
    </a>
  </li>
  <li>
    <a href="http://local/index.php/sample-page/child-page-2/">

      <p>Child page 2</p>
      Some text
    </a>
  </li>
</ul>

I want show these card in single line. If it hasn't enough screen space then a part of cards must move to new line and etc. But I have a very strange result at this moment.

How can I fix this bug?
P.S. I don't know maybe it's important but I need to all card area works like link (To the user can click in any place of card).

could you please post rendered html instead of the functions? — Simon Kraus, Jul 20 '16 at 21:48
I'd hazzard a guess there are improperly closed or improperly nested tags within the html — Professor Abronsius, Jul 20 '16 at 21:50

score 1 · Accepted Answer · answered Jul 20 '16 at 21:57

Try with vertical-align property to this element : ul.page_card_grid li

It fixed the issue :

ul.page_card_grid li {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  height: 200px;
  margin: 20px;
}

ul.page_card_grid li a {
  display: inline-block;
  color: #555;
  width: 200px;
  height: 200px;
  padding: 20px 16px 16px 16px;
  font-size: 16px;
  text-decoration: none;
  background-color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

ul.page_card_grid li a p {
  margin: 8px 0 8px 0;
  font-size: 20px;
  text-align: center;
}

ul.page_card_grid li a img {
  margin: 0 52px 0 52px;
}

ul.page_card_grid li a:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

<ul class="page_card_grid">
  <li>
    <a href="http://contedevel.local/index.php/sample-page/child-page-1/">
      <img width="96" height="96" src="http://contedevel.local/wp-content/uploads/2016/05/ic_timetable-1-150x150.png" class="attachment-96x96 size-96x96" alt="ic_timetable" srcset="http://contedevel.local/wp-content/uploads/2016/05/ic_timetable-1-150x150.png 150w, http://contedevel.local/wp-content/uploads/2016/05/ic_timetable-1.png 256w" sizes="(max-width: 96px) 100vw, 96px" />
      <p>Child page 1</p>
      Some text
    </a>
  </li>
  <li>
    <a href="http://contedevel.local/index.php/sample-page/child-page-2/">

      <p>Child page 2</p>
      Some text
    </a>
  </li>
</ul>

Thank you very much! I rewrote a lot of variants to fix it but, as it turned out, I even was not close to true. — Denis Sologub, Jul 20 '16 at 22:00
You're welcome, If you want a more detailed explanation, check this : http://stackoverflow.com/a/9289377/6028607 — Vincent G, Jul 20 '16 at 22:05

How to change this code to show blocks in-line?

1 Answers1