如何更改此代码以显示块内联？

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>

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

我该如何解决这个错误？
P.S.我不知道这可能是重要的，但我需要所有卡片区域的作品，如链接（用户可以点击卡片的任何地方）。

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>