Question

我有以下HTML和CSS可以向下滚动列表，我无法弄清楚为什么overflow:hidden和overflow-y: scroll没有在ul上工作。

我尝试了各种各样的事情，例如在.interaction-box和ul之间取出div，并使交互框成为id，但它们不起作用。样式确实适用于外部div，但标题随列表一起滚动。

我错过了什么？

＆＃13;

.interaction-box {
  width: 300px;
  height: 360px;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 5px;
}
.interaction-box ul {
  padding: 0px;
  margin: 0px;
  text-align: left;
  overflow: hidden;
  overflow-y: scroll;
}

.search-result {
  list-style-type: none;
  font-size: 17px;
  padding: 5px;
}

＆＃13;

<div className="interaction-box">
   <div className="interaction-title">Top Search Results
   </div>
   <ul>
     <li className="search-result">Result</li>
     <li className="search-result">Result</li>
     <li className="search-result">Result</li>
     <li className="search-result">Result</li>
   </ul>
</div>

＆＃13;

Answer 1

你想给你的ul一个高度，所以它有一个参考，什么时候开始使元素可滚动。如果它没有高度，那么它将永远继续下去并且永远不会应用滚动条。

＆＃13;

.interaction-box {
  width: 300px;
  height: 360px;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 5px;
}

.interaction-box ul {
  height: 200px;
  padding: 0px;
  margin: 0px;
  text-align: left;
  overflow: hidden;
  overflow-y: scroll;
}

.search-result {
  list-style-type: none;
  font-size: 17px;
  padding: 5px;
}

＆＃13;

<div class="interaction-box">
  <div class="interaction-title">Top Search Results</div>
  <ul>
    <li class="search-result">Result</li>
    <li class="search-result">Result</li>
    <li class="search-result">Result</li>
    <li class="search-result">Result</li>
    <li class="search-result">Result</li>
    <li class="search-result">Result</li>
    <li class="search-result">Result</li>
    <li class="search-result">Result</li>
    <li class="search-result">Result</li>
  </ul>
</div>

＆＃13;

Answer 2

像这样：

<div class="interaction-box">
   <div class="interaction-title">Top Search Results
   </div>
   <ul>
     <li class="search-result">Result</li>
     <li class="search-result">Result</li>
     <li class="search-result">Result</li>
     <li class="search-result">Result</li>
     <li class="search-result">Result</li>
     <li class="search-result">Result</li>
     <li class="search-result">Result</li>
     <li class="search-result">Result</li>
   </ul>
</div>

CSS：

.interaction-box {
  width: 300px;
  height: 360px;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 5px;
}

.interaction-box ul {
  padding: 0px;
  margin: 0px;
  text-align: left;
  overflow: hidden;
  overflow-y: scroll;
}

.search-result {
  list-style-type: none;
  font-size: 17px;
  padding: 5px;
}

溢出：隐藏和溢出y：滚动ul不工作;

2 个答案: