javascript - 外容器上的溢出属性导致负边距不起作用
问题描述
我正在渲染一个列表,我希望它上面的悬停颜色跨越外部容器的宽度。我正在使用 anegative margin
来实现这一点。它可以正常工作而无需为外部包装器overflow
提供属性,但是当我提供属性时,它会限制为列表项的宽度,并且不会跨越到外部容器的宽度。overflow
下面的代码显示了没有溢出属性的预期行为,
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
}
.container {
border: 1px solid;
padding: 20px 30px;
background-color: white;
}
.wrapper {
width: 400px;
height: 800px;
}
li {
padding: 15px 10px;
}
li:hover {
background-color: green;
cursor: pointer;
color: white;
margin: 0 -30px;
padding: 15px 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class='container'>
<ul class='wrapper' style="list-style-type:none;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
<li>List item 7</li>
</ul>
</div>
</body>
</html>
这是将溢出-y:自动添加到外部包装器时的代码,
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
}
.container {
border: 1px solid;
padding: 20px 30px;
background-color: white;
}
.wrapper {
width: 400px;
height: 800px;
overflow-y: auto;
}
li {
padding: 15px 10px;
}
li:hover {
background-color: green;
cursor: pointer;
color: white;
margin: 0 -30px;
padding: 15px 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class='container'>
<ul class='wrapper' style="list-style-type:none;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
<li>List item 7</li>
</ul>
</div>
</body>
</html>
在外包装上使用属性时如何实现预期的行为?overflow-y: auto
解决方案
避免使用负边距,只需将填充从 ul 传递给 li。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
}
.container {
border: 1px solid;
padding: 0;
background-color: white;
}
.wrapper {
width: 400px;
height: 800px;
overflow-y: auto;
}
li {
padding: 15px 40px;
}
li:first-child {margin-top: 35px;}
li:last-child {margin-bottom: 35px;}
li:hover {
background-color: green;
cursor: pointer;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class='container'>
<ul class='wrapper' style="list-style-type:none;">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
<li>List item 7</li>
</ul>
</div>
</body>
</html>
推荐阅读
- linux - 从 Linux 中的特定文本行打印单个部分
- ios - 无法学习为 Swift 4 Xcode 10 制作 QR 扫描仪
- arrays - 为什么在 Angular 5 应用程序中无法访问内部数组打字稿?
- python - 使用 Bokeh 绘制时间序列
- java - aop:aspectj-autoproxy 和 tx:annotation-driven 冲突在 spring
- ruby-on-rails - 仅在 Rails 中用于管理员的 sidekiq 监控
- c# - 我有几个关于伤害公式的问题
- node.js - 使用聚合 $in 运算符时出错
- arm - 交叉编译到 ARM
- javascript - 如何使用多维数组列表突出显示 AngularJs 1.4.8 中的搜索文本?