如何水平列出产品？

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>

我已经设置了horizontal类显示为内联，但它似乎不喜欢工作，我想它的工作。我要水平对齐的项目。我怎样才能让它们水平对齐？

Answer 1

只需添加浮动：留在你的类也使用浮动：正确但不要忘记给下一个块元素清除：两者，尝试一次

.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>

Answer 2

这里说到：

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: #111111; 
 
}

<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>

Answer 3

只需添加li {float: left;}你的风格或者，如果你想显示RTL使用li {float: right;}