製品を横に並べるにはどうすればいいですか？

Question

私は例として2つの製品を持っているこのリストを持っています。複数の製品が存在する可能性がありますが、今のところこの質問には2つしかありません。

.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

を使い表示する場合だけでフロートを追加します。あなたのクラスに残っても使用しますfloat：そうだが、次のブロック要素を明確にするのを忘れていない：両方とも、一度試してみる

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