时间戳

首页 > 解决方案 > 使用 inline-grid 使中间项目更大

html - 使用 inline-grid 使中间项目更大

问题描述

我正在尝试为我的托管公司的每个计划制作一个网格。但我无法弄清楚一件事。对于我的托管网格，如何使中间的项目看起来比其他两个项目的高度更大？

代码片段：

.Hosting {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.Hosting>li {
  display: inline-grid;
  width: calc(33% - 15px);
  -moz-box-shadow: 0 0 20px #c3d7ef;
  -webkit-box-shadow: 0 0 20px #c3d7ef;
  box-shadow: 0 0 20px #c3d7ef;
  background: #FFF;
  padding: 20px;
  border-radius: 4px;
  margin: 5px;
}
<ul class="Hosting">
  <li>
    <h2>
      Small
      <small>10.99€&lt;/small>
    </h2>

    <ul>
      <li><i class="fa fa-check"></i> Item</li>
    </ul>

    <a href="" class="Order"><button>Order Now</button></a>
  </li>

  <li>
    <h2>
      Small
      <small>10.99€&lt;/small>
    </h2>

    <ul>
      <li><i class="fa fa-check"></i> Item</li>
    </ul>

    <a href="" class="Order"><button>Order Now</button></a>
  </li>

  <li>
    <h2>
      Small
      <small>10.99€&lt;/small>
    </h2>

    <ul>
      <li><i class="fa fa-check"></i> Item</li>
    </ul>

    <a href="" class="Order"><button>Order Now</button></a>
  </li>
</ul>

我试图设置它们的高度和边距，但它似乎不起作用。因为它是内联网格，但我相信这是展示我的计划的最佳方式？我不是使用花车的忠实粉丝。

关于如何实现这一目标的任何想法？

标签： htmlcss

解决方案

transform:scale(1.2)在要显示的项目上使用 css 属性大于其他两个！

推荐阅读