Wie ändert man diesen Code, um Blöcke inline anzuzeigen?

Question

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

gerenderten HTML Quelle:

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>

ich zeigen will, dass diese Karte in einzelnen Zeilen. Wenn es nicht genug Platz auf dem Bildschirm hat, dann muss ein Teil der Karten in eine neue Zeile und so weiter verschoben werden. Aber ich habe in diesem Moment ein sehr merkwürdiges Ergebnis.

Wie kann ich diesen Fehler beheben?
P.S. Ich weiß nicht, vielleicht ist es wichtig, aber ich muss alle Kartenbereich funktioniert wie Link (an den Benutzer kann an jeder Stelle der Karte klicken).

Answer 1

Versuchen mit vertical-align Eigenschaft für dieses Element: ul.page_card_grid li

Es das Problem behoben:

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>