Question

我正在尝试创建带有图像列表的滑块效果。我需要每个人都可以内联并占用整个屏幕宽度。我正在使用float，还尝试使li内联。使它们处于同一行的唯一原因是它们的宽度不全。如何在同时使每个li全屏的同时完成此操作？因此，它们应该超出屏幕宽度。

以下是当前行为的屏幕截图： https://www.awesomescreenshot.com/image/4177243/f8d1a38ce4b6096344f7f7befd4176fe

.mobile-slider-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 600px;
}
.mobile-slider-wrapper ul {
    position: relative;
    margin: 0;
    padding: 0;
    height: 100%;
    list-style: none;
}
.mobile-slider-wrapper li {
    float: left;
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
    width: 100%;
}

Answer 1

我认为您需要使用一些JS来计算包装纸上的宽度。 2张幻灯片= 200vw，3张幻灯片= 300vw，依此类推。

$('.mobile-slider-wrapper').css('width', ($('.mobile-slider-wrapper').children().length * 100) + 'vw');

Answer 2

您可以结合使用vw单元和非包装容器来达到此效果。

这是CSS模拟：

#container { 
  /* This stops the items wrapping over onto the next line */
  white-space: nowrap;
  
  /* We set the width and scroll to stop this container affecting the entire page's width */
  overflow-x: auto;
  width: 100vw;
  
  /* This prevents any gaps between inline elements, keep in mind that if your child elements contain text, they will need to reset the font size, or this property can be removed */
  font-size: 0;
}

.item {
  display: inline-block;
  width: 100vw; /* Make the item take up the full windows width*/
  height: 100px;
}

.item1 {
  background-color: #F00;
}

.item2 {
  background-color: #0F0;
}

.item3 {
  background-color: #00F;
}

.item4 {
  background-color: #FF0;
}

<div id="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
</div>

无法获取全角李的内联

2 个答案: