html - 如何水平列出产品？

Question

我有这个列表，其中有两个产品作为示例。对于这个问题，可能有多种产品，但现在只有两种。

.horizontal {
  display: inline;
  float:left;
}
.product{
    display: block;
    height: 320px;
    border: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    text-align: center;
    padding: 10px 5px;
}
.image{
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
    max-height: 180px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    padding-left:.45cm;
}

<ul class="horizontalul">
  <li class="horizontal" style="display: inline;">
    <div class="product">
      <div class="image">
        <img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
      </div>
      <div class="description">
        <h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
      </div>
      <div class="price">
        <span>Rs. 37,900</span>
        <input type="button" class="btn btn-primary btn-sm" value="Details" />
      </div>
    </div>
  </li>
  <li class="horizontal" style="display: inline;">
    <div class="product">
      <div class="image">
        <img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
      </div>
      <div class="description">
        <h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
      </div>
      <div class="price">
        <span>Rs. 37,900</span>
        <input type="button" class="btn btn-primary btn-sm" value="Details" />
      </div>
    </div>
  </li>
</ul>

我已将 horizo​​ntal 类设置为显示为内联，但它似乎并没有像我希望的那样工作。我水平对齐的元素。我怎样才能使它们水平对齐？

Answer 1

只需在你的类中添加 float:left 也使用 float:right 但不要忘记给下一个 block 元素 clear:both ，尝试一次

.horizontal {
  display: inline;
  float:left;
  padding:10px 5px;
  border:1px solid #dddddd;
  margin-right:5px;
  }

<ul>
  <li class="horizontal" style="display: inline;">
    <div class="product">
      <div class="image">
        <img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
      </div>
      <div class="description">
        <h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
      </div>
      <div class="price">
        <span>Rs. 37,900</span>
        <input type="button" class="btn btn-primary btn-sm" value="Details" />
      </div>
    </div>
  </li>
  <li class="horizontal" style="display: inline;">
    <div class="product">
      <div class="image">
        <img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
      </div>
      <div class="description">
        <h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
      </div>
      <div class="price">
        <span>Rs. 37,900</span>
        <input type="button" class="btn btn-primary btn-sm" value="Details" />
      </div>
    </div>
  </li>
</ul>