如何水平列出產品？

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