假设我有一个 div .parent
,其中包含另一个 div .child
。我可以吗?如果可以,我该如何在 .child
超出 .parent
的宽度时使用 CSS 显示指示(即图标)?
我已经使用 jQuery 实现了我的目标(参见下面的示例),但我正在寻找一个仅使用 CSS 的解决方案,因为我正试图尽可能低地使用 jQuery。
注意:.child
div 具有动态宽度。
另一个注意事项:我不想编辑 div 的内容
var x = $('.child').offset().left + $('.child').width();
var y = $('.parent').offset().left + $('.parent').width();
if (x > y) {
var z = x - y;
$('.child')
.append($('<div></div>')
.css('left', z - 10)
.css('position', 'absolute')
.css('top', $('.child').height() / 2 - 10)
.text('>'));
}
.parent {
position: relative;
border: 1px solid #000;
height: 200px;
width: 200px;
overflow: hidden;
}
.child {
position: absolute;
top: 40px;
border: 1px solid red;
height: 100px;
width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="parent">
<div class="child">
Some text
</div>
</div>
最佳答案
我阅读了您的问题和评论。我有个主意。 是的,我认为解决您的问题的最佳方法是使用 javascript。
但我决定寻找替代品:)
这就是为什么我在这个解决方案上花费了 10 分钟的时间。
是的,它只适用于 webkit 浏览器。但这是可能的。
.parent {
position: relative;
border: 1px solid #000;
height: 200px;
width: 200px;
overflow:auto;
}
.child {
position: absolute;
top: 40px;
border: 1px solid red;
height: 100px;
width: 400px;
}
.parent1 {
position: relative;
border: 1px solid #000;
height: 200px;
width: 200px;
overflow:auto;
}
.child1 {
position: absolute;
top: 40px;
border: 1px solid red;
height: 400px;
width: 100px;
}
::-webkit-scrollbar {
background: transparent;
}
::-webkit-scrollbar-button:horizontal:end {
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid transparent;
border-left:8px solid red;
}
::-webkit-scrollbar-button:vertical:end {
border-left: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid transparent;
border-top:8px solid blue;
}
<div class="parent">
<div class="child">
Some text
</div>
</div>
<div class="parent1">
<div class="child1">
Some text
</div>
</div>
关于html - 如果元素超过其父元素的大小,如何使用 CSS 显示指示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37923014/