代码之家 › 专栏 › 技术社区 › Jaeeun Lee ueznem

CSS样式不应用于元素的溢出部分

overflow css javascript

Jaeeun Lee ueznem · 技术社区 · 8 年前

https://codepen.io/sleepydada/pen/RLBqYW

HTML:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

* {
   box-sizing: border-box; 
}
ul {
  list-style: none;
  display: flex;
  border-right: 13px solid yellow;
  padding:0;
  li {
    background:red;
    flex: 0 0 250px;
    height: 250px;
    border: 1px solid black;
    box-shadow: 0 4px 2px -2px gray;
  }
  &.added {
    border: 10px solid blue;
   }
}

JS:

var ul = document.querySelector('ul')
window.addEventListener('scroll', function() {
  ul.classList.add('added')
})

1 回复 | 直到 8 年前

G-Cyrillus 8 年前

要允许容器扩展到最初设置的大小,可以使用表布局。 https://www.w3.org/TR/CSS2/tables.html#auto-table-layout

在这种情况下,您使用 flex 不要让孩子裹着。 display:table + table-cell 将具有相同的行为,但也会根据需要扩展。

var ul = document.querySelector('ul')
window.addEventListener('scroll', function() {
  ul.classList.add('added')
})

* {
  box-sizing: border-box;
}

ul {
  list-style: none;
  display: table;
  border-right: 13px solid yellow;
  padding: 0;
  height: 250px;
  width: 100%;/* is this needed ? */
}
ul li {
  background: red;
  display: table-cell;
  min-width: 250px;
  border: 1px solid black;
  box-shadow: 0 4px 2px -2px gray;
}
ul.added {
  border: 10px solid blue;
}

<ul>
  <li></li> 
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

https://codepen.io/gc-nomade/pen/QqBzaZ/

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前