Reputation: 2711
I want the images in my list items to stay on the same line as the browser window resizes and not to break onto a new line. Is this possible? I tried using nowrap as I saw some other people mentioning it but it didn't work for me.
*{
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>
Upvotes: 0
Views: 100
Reputation: 67798
Make the li
items inline-block
s and add overflow-x: visible; white-space: nowrap;
to .carousel
in order to have all li
s in one line
* {
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>
Upvotes: 1
Reputation: 2261
*{
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>
is this you want?
Upvotes: 0