Question

动机
CSS不允许样式化html select组件的选项，因此我正在构建一个自定义的“ component”来这样做。

挑战就是这个
沿x方向需要保持内联流。
沿y方向，它必须能够重叠其下方的内容。

这是一个例子（不会中断流程）
http://jsfiddle.net/4tyvLmqn/1

html

<div class="dropdown">
  <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>
<hr />
This should not move down
<hr />

JS（点击处理程序-可能有一种纯CSS方式）

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

SCSS

.dropdown {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  user-select: none;
  border: 1px solid gray;
}

.item {
  visibility: hidden;
  height: 0;

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

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

Answer 1

只需保持固定高度，然后调整溢出（可见/隐藏）。如果您有很多元素，也可以考虑使用max-height。

const dropdown = document.querySelector('.dropdown');

dropdown.addEventListener('click', e => {
  dropdown.classList.toggle('isOpen')
});

.dropdown {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  user-select: none;
  border: 1px solid gray;
  height: calc(1em + 2 * 0.5em);
  overflow: hidden;
}

.isOpen {
  overflow: visible;
}

.background {
  background-color: #fff;
  z-index: 1;
  border: inherit;
  margin: -1px;
  max-height: calc(5*(1em + 2 * 0.5em));
}
.isOpen .background {
  overflow:auto;
  flex-shrink:0;
}

.item {
  padding: 0.5em;
  cursor: pointer;
}

<div class="dropdown">
  <div class="background">
    <div class="item">Select an Item</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 class="item">ad fds adfs dfsa fsd fasd</div>
    <div class="item">e</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 />

Answer 2

此处的代码段似乎不适用于CSS3。我为此创建了一个JSFiddle：http://jsfiddle.net/42mpa6wn/

Javascript：

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

CSS：

.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;
  }

}

HTML：

<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 />

基本上，您希望.dropdown成为页面上放置relative的页面。另外，您希望在触发下拉操作时将.itemlist置于absolute的位置。您仍然需要美化它

CSS如何在一个方向上打破流动

2 个答案: