如何停止列表項目打破新行

我希望我的列表項中的圖像保持與瀏覽器窗口調整大小相同的行，而不是闖入新行。這可能嗎？我嘗試使用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>

來源

2017-07-03 Reece

嘗試：

.carousel{ 
    display:flex; 
}

來源

2017-07-03 09:41:24 Anu

*{ 
 
    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: 10%; 
 
    max-width: 600px; 
 
    height: 100%; 
 
    max-height: 300px; 
 
    padding: 150px 0; 
 
} 
 

 
.active{ 
 
    width: 80%; 
 
    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>

這是你想要？

來源

2017-07-03 11:19:26

充分利用li項目inline-block S和添加overflow-x: visible; white-space: nowrap;到.carousel爲了讓所有li S IN一行

* { 
 
    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 { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style-type: none; 
 
    min-width: 100%; 
 
    max-width: 2400px; 
 
    height: 100%; 
 
    max-height: 350px; 
 
    overflow-x: visible; 
 
    white-space: nowrap; 
 
} 
 

 
.carousel li { 
 
    display: inline-block; 
 
    padding: 0; 
 
} 
 

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

來源

2017-07-03 11:33:46 Johannes

如何停止列表項目打破新行

回答

相關問題