gpt4 book ai didi

html - 如何修复 Web 组件以获取滚动条?

转载 作者:行者123 更新时间:2023-11-28 00:01:35 25 4
gpt4 key购买 nike

所以我正在尝试制作一个 Web 组件,my-thing,它可以放置在 html 中的任何位置。但是我在让滚动条工作时遇到了问题。

鉴于此示例 ( codepen link ),并且不更改标记为“无法更改”的内容,我如何让滚动条出现?

<html>
<body>
<style>
.my-thing {
white-space: pre;
overflow: auto;
border: 1px red solid;
/*width:100%;*/
}
</style>

<br />
<div style="display:flex"> <!-- can't change -->
<div> <!-- can't change -->
<div class="my-thing">
This has NO scrollbars!!
This is a loooooooong and boring piece of text that really doesn't deserve to be read at all.
This is another loooooooong and boring piece of text that really doesn't deserve to be read at all.
</div>
</div>
</div>

<br />
<div class="my-thing">
This auto scrolls correctly.
This is a loooooooong and boring piece of text that really doesn't deserve to be read at all.
This is another loooooooong and boring piece of text that really doesn't deserve to be read at all.
</div>

</body>
</html>

编辑:您也不能手动更改 my-thing 的宽度。理想情况下,我们需要“width:100%”。

最佳答案

您可以将 my-thing 类的宽度和高度设置为任意值。设置组件宽度使水平滚动条出现,高度使垂直滚动条出现

 .my-thing { white-space: pre; overflow: auto; border: 1px red solid; width: 100px; }

关于html - 如何修复 Web 组件以获取滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55958392/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com