0
リスト項目の画像をブラウザウィンドウのサイズ変更と同じ行に残して、新しい行に分割しないようにします。これは可能ですか？私は他の人たちに言及しているのを見て、nowrapを使ってみましたが、それは私にとってはうまくいかなかったのです。リスト項目を新しい行に分割する方法を停止する方法
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
margin: 0;
padding: 0;
}
.cont{
position: relative;
font-size: 0;/*removes white space*/
margin: 60px auto;
padding: 0;
}
.carousel{
position: relative;
margin: 0 auto;
padding: 0;
list-style-type: none;
width: 100%;
max-width: 2400px;
height: 100%;
max-height: 350px;
}
.carousel li{
float: left;
}
.carousel li img{
width: 100%;
height: auto;
}
#next{
position: absolute;
top: 45%;
right: 0;
width: 40px;
height: 40px;
background-color: blue;
font-size: 0;
z-index: 1;
}
#prev{
position: absolute;
top: 45%;
left: 0;
width: 40px;
height: 40px;
background-color: blue;
z-index: 1;
}
.img_cont{
width: 100%;
max-width: 600px;
height: 100%;
max-height: 300px;
padding: 150px 0;
}
.active{
width: 100%;
max-width: 1200px;
height: 100%;
max-height: 600px;
padding: 0;
}<div class="cont">
<div id="next">
</div>
<div id="prev">
</div>
<ul class="carousel">
<li class="img_cont">
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" />
</li>
<li class="img_cont active">
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" />
</li>
<li class="img_cont">
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" />
</li>
</ul>
</div>