php - 如何更改此代码以显示内联 block ？

Question

我有 php 代码:

<?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');
?>

呈现的 html 源代码:

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>

我想在单行中显示这些卡片。如果它没有足够的屏幕空间，那么一部分卡片必须移动到新行等等。但是我现在有一个非常奇怪的结果。

我该如何修复这个错误？
附言我不知道也许这很重要，但我需要所有卡片区域都像链接一样工作(用户可以点击卡片的任何地方)。

Answer 1

尝试对这个元素使用 vertical-align 属性:ul.page_card_grid li

它解决了这个问题:

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>