制作横向排列的若干个div元素时,元素相邻处出现意料外的间隔。
<div class="wrapper">
<div class="slider">
<div class="testimonial">
<p>This is testimonial 1</p>
<button>Button 1</button>
</div>
<div class="testimonial">
<p>This is testimonial 2</p>
<button>Button 2</button>
</div>
<div class="testimonial">
<p>This is testimonial 3</p>
<button>Button 3</button>
</div>
<div class="testimonial">
<p>This is testimonial 4</p>
<button>Button 4</button>
</div>
<div class="testimonial">
<p>This is testimonial 5</p>
<button>Button 5</button>
</div>
</div>
</div>
body{
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
}
.wrapper{
width: 100%;
overflow: hidden;
}
.slider{
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.testimonial{
background-color: #ededed;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 650px;
height: 130px;
}