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

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

Answer 1

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>