Fatal编程技术网
  • css/
  • CSS如何在一个方向上中断流

CSS如何在一个方向上中断流

css

CSS如何在一个方向上中断流,css,Css,动机 CSS不允许为html选择组件的选项设置样式，因此我正在构建一个自定义“组件”来实现这一点 挑战在于此 沿x方向，它需要保持内联流。 沿y方向，它需要能够重叠其下方的内容 下面是一个示例（不中断流程） html asdflkhj asdf adf B C ADFDS adfs dfsa fsd fasd E 这不应该向下移动 JS（单击处理程序-可能有一种纯CSS的方法可以做到这一点） document.querySelector（'.dropdown.selected'）。ad

动机
CSS不允许为html选择组件的选项设置样式，因此我正在构建一个自定义“组件”来实现这一点

挑战在于此
沿x方向，它需要保持内联流。
沿y方向，它需要能够重叠其下方的内容

下面是一个示例（不中断流程）

html


asdflkhj asdf adf
B
C
ADFDS adfs dfsa fsd fasd
E


这不应该向下移动
JS（单击处理程序-可能有一种纯CSS的方法可以做到这一点）

document.querySelector（'.dropdown.selected'）。addEventListener（'click'，e=>{
e、 target.parentElement.classList.toggle（'isOpen'）
})
SCSS

。下拉列表{
显示：内联flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：拉伸；
用户选择：无；
边框：1px纯色灰色；
}
.项目{
可见性：隐藏；
身高：0；
&.选定{
能见度：可见；
光标：指针；
高度：自动；
}
.isOpen&{
能见度：可见；
高度：自动；
}
}
只需保持固定高度，然后调整溢流（可见/隐藏）。你也可以考虑<代码>最大高度< /代码>以防你有很多元素。

const dropdown=document.querySelector（'.dropdown'）；
dropdown.addEventListener（'click'，e=>{
下拉列表.classList.toggle（'isOpen'）
});

。下拉列表{
显示：内联flex；
弯曲方向：立柱；
调整内容：灵活启动；
对齐项目：拉伸；
用户选择：无；
边框：1px纯色灰色；
高度：计算（1米+2*0.5米）；
溢出：隐藏；
}
伊索彭先生{
溢出：可见；
}
.背景{
背景色：#fff；
z指数：1；
边界：继承；
保证金：-1px；
最大高度：计算值（5*（1米+2*0.5米））；
}
.isOpen.背景{
溢出：自动；
弹性收缩：0；
}
.项目{
填充：0.5em；
光标：指针；
}



选择一个项目
B
C
ADFDS adfs dfsa fsd fasd
E
ADFDS adfs dfsa fsd fasd
E
ADFDS adfs dfsa fsd fasd
E

这不应向下移动

只需保持固定高度，然后调整溢出（可见/隐藏）。你也可以考虑<代码>最大高度< /代码>以防你有很多元素。



const dropdown=document.querySelector（'.dropdown'）；
dropdown.addEventListener（'click'，e=>{
下拉列表.classList.toggle（'isOpen'）
});

。下拉列表{
显示：内联flex；
弯曲方向：立柱；
调整内容：灵活启动；
对齐项目：拉伸；
用户选择：无；
边框：1px纯色灰色；
高度：计算（1米+2*0.5米）；
溢出：隐藏；
}
伊索彭先生{
溢出：可见；
}
.背景{
背景色：#fff；
z指数：1；
边界：继承；
保证金：-1px；
最大高度：计算值（5*（1米+2*0.5米））；
}
.isOpen.背景{
溢出：自动；
弹性收缩：0；
}
.项目{
填充：0.5em；
光标：指针；
}



选择一个项目
B
C
ADFDS adfs dfsa fsd fasd
E
ADFDS adfs dfsa fsd fasd
E
ADFDS adfs dfsa fsd fasd
E

这不应向下移动

这里的代码片段似乎不适用于CSS3。我已经为此创建了一个JSFIDLE：

Javascript:


document.querySelector('.dropdown .selected').addEventListener('click', e => {
    e.target.parentElement.parentElement.classList.toggle('isOpen')
})



.dropdown {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  user-select: none;
  border: 1px solid gray;
  background: white;
  height:25px;
  width:200px;
  position:relative;
}

.isOpen .itemlist{
  position: absolute;
  background: white;
  width:inherit;
  top:calc(100% - 20px);
}

.item {
  visibility: hidden;
  height: 0;

  &.selected {
    visibility: visible;
    cursor: pointer;
    height: auto;
  }

  .isOpen & {
    visibility: visible;
    height: auto;
  }

}



<hr />
This should not move
<hr />
This should not move
<hr />
<div class="dropdown">
  <div class="itemlist">
    <div class="item selected">asdflkhj asdf adf</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">ad fds adfs dfsa fsd fasd</div>
    <div class="item">e</div>
  </div>
</div>
<hr />
This should not move down
<hr />


CSS:


document.querySelector('.dropdown .selected').addEventListener('click', e => {
    e.target.parentElement.parentElement.classList.toggle('isOpen')
})



.dropdown {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  user-select: none;
  border: 1px solid gray;
  background: white;
  height:25px;
  width:200px;
  position:relative;
}

.isOpen .itemlist{
  position: absolute;
  background: white;
  width:inherit;
  top:calc(100% - 20px);
}

.item {
  visibility: hidden;
  height: 0;

  &.selected {
    visibility: visible;
    cursor: pointer;
    height: auto;
  }

  .isOpen & {
    visibility: visible;
    height: auto;
  }

}



<hr />
This should not move
<hr />
This should not move
<hr />
<div class="dropdown">
  <div class="itemlist">
    <div class="item selected">asdflkhj asdf adf</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">ad fds adfs dfsa fsd fasd</div>
    <div class="item">e</div>
  </div>
</div>
<hr />
This should not move down
<hr />


HTML:


document.querySelector('.dropdown .selected').addEventListener('click', e => {
    e.target.parentElement.parentElement.classList.toggle('isOpen')
})



.dropdown {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  user-select: none;
  border: 1px solid gray;
  background: white;
  height:25px;
  width:200px;
  position:relative;
}

.isOpen .itemlist{
  position: absolute;
  background: white;
  width:inherit;
  top:calc(100% - 20px);
}

.item {
  visibility: hidden;
  height: 0;

  &.selected {
    visibility: visible;
    cursor: pointer;
    height: auto;
  }

  .isOpen & {
    visibility: visible;
    height: auto;
  }

}



<hr />
This should not move
<hr />
This should not move
<hr />
<div class="dropdown">
  <div class="itemlist">
    <div class="item selected">asdflkhj asdf adf</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">ad fds adfs dfsa fsd fasd</div>
    <div class="item">e</div>
  </div>
</div>
<hr />
This should not move down
<hr />




这不应该移动


这不应该移动


asdflkhj asdf adf
B
C
ADFDS adfs dfsa fsd fasd
E


这不应该向下移动





基本上，您希望
.dropdown
与我们放置它的页面相对。此外，当触发下拉操作时，您希望
.itemlist
处于
绝对
位置。您仍然需要美化它
这里的代码片段似乎不适用于CSS3。我已经为此创建了一个JSFIDLE：

Javascript:


document.querySelector('.dropdown .selected').addEventListener('click', e => {
    e.target.parentElement.parentElement.classList.toggle('isOpen')
})



.dropdown {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  user-select: none;
  border: 1px solid gray;
  background: white;
  height:25px;
  width:200px;
  position:relative;
}

.isOpen .itemlist{
  position: absolute;
  background: white;
  width:inherit;
  top:calc(100% - 20px);
}

.item {
  visibility: hidden;
  height: 0;

  &.selected {
    visibility: visible;
    cursor: pointer;
    height: auto;
  }

  .isOpen & {
    visibility: visible;
    height: auto;
  }

}



<hr />
This should not move
<hr />
This should not move
<hr />
<div class="dropdown">
  <div class="itemlist">
    <div class="item selected">asdflkhj asdf adf</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">ad fds adfs dfsa fsd fasd</div>
    <div class="item">e</div>
  </div>
</div>
<hr />
This should not move down
<hr />


CSS:


document.querySelector('.dropdown .selected').addEventListener('click', e => {
    e.target.parentElement.parentElement.classList.toggle('isOpen')
})



.dropdown {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  user-select: none;
  border: 1px solid gray;
  background: white;
  height:25px;
  width:200px;
  position:relative;
}

.isOpen .itemlist{
  position: absolute;
  background: white;
  width:inherit;
  top:calc(100% - 20px);
}

.item {
  visibility: hidden;
  height: 0;

  &.selected {
    visibility: visible;
    cursor: pointer;
    height: auto;
  }

  .isOpen & {
    visibility: visible;
    height: auto;
  }

}



<hr />
This should not move
<hr />
This should not move
<hr />
<div class="dropdown">
  <div class="itemlist">
    <div class="item selected">asdflkhj asdf adf</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">ad fds adfs dfsa fsd fasd</div>
    <div class="item">e</div>
  </div>
</div>
<hr />
This should not move down
<hr />


HTML:


document.querySelector('.dropdown .selected').addEventListener('click', e => {
    e.target.parentElement.parentElement.classList.toggle('isOpen')
})



.dropdown {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  user-select: none;
  border: 1px solid gray;
  background: white;
  height:25px;
  width:200px;
  position:relative;
}

.isOpen .itemlist{
  position: absolute;
  background: white;
  width:inherit;
  top:calc(100% - 20px);
}

.item {
  visibility: hidden;
  height: 0;

  &.selected {
    visibility: visible;
    cursor: pointer;
    height: auto;
  }

  .isOpen & {
    visibility: visible;
    height: auto;
  }

}



<hr />
This should not move
<hr />
This should not move
<hr />
<div class="dropdown">
  <div class="itemlist">
    <div class="item selected">asdflkhj asdf adf</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">ad fds adfs dfsa fsd fasd</div>
    <div class="item">e</div>
  </div>
</div>
<hr />
This should not move down
<hr />




这不应该移动


这不应该移动


asdflkhj asdf adf
B
C
ADFDS adfs dfsa fsd fasd
E


这不应该向下移动





基本上，您希望
.dropdown
与我们放置它的页面相对。此外，当触发下拉操作时，您希望
.itemlist
处于
绝对
位置。您仍然需要美化它
嗨，Stephen-如果您的问题是CSS而不是Sass，请包含您编译的CSS。否则，如果您的问题是关于如何在Sass中执行您已经可以在CSS中执行的操作，请澄清并添加Sass标记。保持固定高度，然后只需调整溢出（可见/隐藏）@Temaniaff谢谢您的建议！如果你把答案加在下面，我可以把它标记为正确。这是我到目前为止所拥有的。现在需要做的是滚动到列表中的正确项，但这是另一个需要解决的问题Hi Stephen-如果您的问题是CSS而不是Sass，请包含您编译的CSS。否则，如果您的问题是关于如何在Sass中执行您已经可以在CSS中执行的操作，请澄清并添加Sass标记。保持固定高度，然后只需调整溢出（可见/隐藏）@Temaniaff谢谢您的建议！如果你把答案加在下面，我可以把它标记为正确。这是我到目前为止所拥有的。现在需要的是滚动到列表中的正确项，但这是另一个需要解决的问题