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

Question

我有php代码：

func calculate() -> String {

        if let temp1 = self.calculateOther() {

            if let temp2 = self.dvalue {

                let disAmt = Double(temp1)! * Double(temp2)!  //Fails here
                let final =  disAmt / 100
                let disStr : String = String(format: "%.02f", final)
                return disStr
            }
        }


        return "0.00"
    }

呈现的html源代码：

＆＃13;

＆＃13;

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

＆＃13;

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);
}

＆＃13;

＆＃13;

＆＃13;

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

我该如何解决这个问题呢？ 附：我不知道也许这很重要，但我需要所有卡片区域的工作如链接（用户可以点击卡片的任何地方）。

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>