使用内联网格使中间项更大

时间:2018-06-14 08:40:52

标签: html css

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

代码段:

.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€</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€</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€</small>
    </h2>

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

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

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

有关如何实现这一目标的任何想法吗?

1 个答案:

答案 0 :(得分:1)

对要显示比其他两个更大的项目使用css属性transform:scale(1.2) !!