html - 无法获取全 Angular li 的内联

Question

我正在尝试使用图像列表创建 slider 效果。我需要每一个都通过内联并占用全屏宽度。我正在使用 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

您可以结合使用 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>