由于ul和div

时间:2019-12-05 21:13:37

标签: html css list horizontal-scrolling scroll-snap

因此,我有所有100vh和100vw的垂直滚动捕捉部分。我原本打算单独出现页面。这些部分之一具有一个水平滚动部分,其概念与100vh和100vw部分相同。好吧,直到我添加ul标签,一切都可以正常工作。 div也一样。然后,水平部分的高度开始变化。它们仍将是页面宽度的100%,但高度会有所不同。滚动捕捉仍然有效。代码如下:

HTML

<body>
  <main>
    <section class="v-child">
      <h1>Section 1</h1>
    </section>

    <section class="v-child h-sect">
      <div class="h-child">
        <h2>Horizontal Section 1</h2>
        <ul class="list">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </div>

      <div class="h-child">
        <h2>Horizontal Section 2</h2>
        <ul class="list">
          <li>Thing 1</li>
          <li>Thing 2</li>
        </ul>
      </div>

      <div class="h-child">
        <h2>Horizontal Section 3</h2>
        <div class="list">
          <h3>Item 1</h3>
          <h3>Item 2</h3>
        </div>
      </div>
    </section>

    <section class="v-child">
      <h1>Section 3</h1>
    </section>
  </main>
</body>

CSS

顺便说一句,我将scroll-snap-type: y mandatory;定位到html容器的原因是因为如果您将body,main或专用div容器定位为目标,则它似乎不起作用。我认为这与当前问题无关,但我想提到它是因为我认为这是奇怪的行为。

html{
  scroll-snap-type: y mandatory;
}
body{
  margin: 0;
}
.v-child{
  scroll-snap-align: start;
  background: green;
  height: 100vh;
  width: 100vw;
}
h1{
  margin: 0;
}
.h-sect{
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.h-child{
  display: inline-block;
  scroll-snap-align: center;
  margin: 0;
  height: 100%;
  width: 100%;
  background: yellow;
}
.list{
  margin: 0;
}

我尝试给列表提供0的余量,我认为这没有什么关系,而且看起来并没有因为没有任何变化。以ul标签形式出现的列表和内部带有h3的div都似乎改变了h子部分的高度。根据我的理解,div在自己或类似的东西后创建一个空行。我不太明白。好吧,如果我将div更改为font-size 0,则所有h-child部分的高度都相同,但是所有内容都是不可见的,因为所有font-size现在都为0。

我也尝试将.list设置为font-size 0,这也起作用。所有部分都将是正确的大小。然后,我将16px的字体大小添加到列表中的项目,而不是列表本身,并在每个部分的顶部再次添加空白区域。这让我感到困惑,那怎么可能。 .list位于h-child部分中。为什么改变高度?那不可能!我几乎对这种布局失去了所有希望。我想不明白。

有关此活动的示例,您可以在“项目”部分中查看我的投资组合网站kudlanov.com这是一项正在进行的工作)。我在那里有更多的元素和样式,但是我在上面的代码上进行了测试,以查明问题所在,并且似乎与.lists有关。

2 个答案:

答案 0 :(得分:0)

问题代码似乎就是这一部分。 <h3>具有属性display:block,该属性会导致您的页面出现奇怪的高度。是否必须为中间部分重新设计布局容器,以允许您使用不同的标签。或者,您可以简单地将<h3>标签更改为<span>之类的标签,并为其分配文本字体和粗体

  <h3>Item 1</h3>
  <h3>Item 2</h3>

答案 1 :(得分:0)

如果水平区域是使用flexbox制作的,那么一切都将神奇地开始工作。

.h-sect样式更改为此:

.h-sect{
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}

.h-child用于:

.h-child{
  scroll-snap-align: center;
  flex: 0 0 auto;
  margin: 0;
  height: 100%;
  width: 100%;
  background: yellow;
}

以这种方式执行所有元素,就像您期望它们一样。完全没有异常行为。