相关疑难解决方法(0)
Flexbox /网格布局中的上一个边距/填充折叠
我有一个项目列表,我试图安排到一个可滚动的水平布局与flexbox.
容器中的每个项目都有左右边距,但最后一个项目的右边距正在折叠.
有没有办法阻止这种情况发生,或者是一个好的解决方法？
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
height: 300px;
overflow: auto;
width: 600px;
background: orange;
}
ul li {
background: blue;
color: #fff;
padding: 90px;
margin: 0 30px;
white-space: nowrap;
flex-basis: auto;
}<div class="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>26
推荐指数
推荐指数
3
解决办法
解决办法
7032
查看次数
查看次数
溢出在动态移动元素上滚动
var block = document.getElementById('block')
function myFunct() {
block.style.transform = 'translateX(-400px)'
} .container {
position:relative;
width:400px;
height:150px;
margin:auto;
background-color: blue;
overflow:scroll;
}
#block {
position:absolute;
height:25px;
width:100%;
left:50%;
bottom:50%;
overflow: scroll;
background-color: yellow;
border:1px solid black;
align-self: flex-end;
} <div class="container">
<div id="block"></div>
<button onclick='myFunct()'>CLICK</button>
</div>在我的示例中，该块溢出了容器的右侧，并且溢出被设置为滚动。因此，您可以滚动右侧并查看块的其余部分。然后，当我运行该函数时，该块将移动，以至于它溢出了容器的左侧。但是，它不会进行调整以允许向左滚动以查看块的其余部分。解决方案是什么，允许在功能运行并且块移动以使这些不同的侧溢出之后允许其他侧滚动。
9
推荐指数
推荐指数
1
解决办法
解决办法
203
查看次数
查看次数
对于浏览器窗口向左溢出的内容,是否可以显示滚动条？
当内容大于窗口时,此代码使浏览器具有水平滚动条,溢出到右侧:
div.a {
position: relative;
float: left;
background-color: red;
}
div.b {
position: absolute;
top: 100%;
left: 100%;
background-color: blue;
white-space: nowrap;
}<div class="a">Text1
<div class="b">
Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
</div>
</div>
但是如果我将第一个div浮动到右边然后第二个位于它左边,浏览器就不会创建一个水平滚动条,并且无法查看溢出的文本.
div.a {
position: relative;
float: right;
background-color: red;
}
div.b {
position: absolute;
top: 100%;
right: 100%;
background-color: blue;
white-space: nowrap;
}<div class="a">
Text1
<div class="b">
Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
</div>
</div>
我可以以某种方式更改此行为,如果内容大于窗口,则能够向左滚动,向左溢出？
在FF 47,IE 11,Opera 38上测试 …
8
推荐指数
推荐指数
2
解决办法
解决办法
588
查看次数
查看次数
使用 CSS 动画和背景颜色显示文本
我试图做一个文本显示CSS动画像这一个。使用::before和::after似乎是一种过于复杂的方法，因此我尝试使用线性渐变背景颜色、背景位置或其他可能更简单的方法来执行此操作。
:root {
--primary-rgba: rgba(17,184,106,1);
--secondary-rgba: rgba(255,255,255,1);
}
@keyframes slidein {
0% {
background: transparent;
}
25% {
background: linear-gradient(90deg, var(--secondary-rgba) 0%, var(--secondary-rgba) 50%, var(--primary-rgba) 50% var(--primary-rgba) 100%);
}
50% {
background: var(--secondary-hex);
}
75% {
background: linear-gradient(90deg, var(--primary-rgba) 0%, var(--primary-rgba) 50%, var(--secondary-rgba) 50% var(--secondary-rgba) 100%);
}
100% {
background: transparent;
}
}
我什至想知道向动画添加更多帧是否会使其按照我想要的方式工作，并尝试在一堆（重复）帧中进行黑客攻击。仍然没有运气。
在发现CSS 过渡可能还不支持渐变之后，我尝试使用背景位置来显示文本，但没有成功。
这些方法中的任何一种都可行吗？
1
推荐指数
推荐指数
1
解决办法
解决办法
713
查看次数
查看次数