gpt4 book ai didi

HTML:宽
不生成水平滚动条

转载 作者:行者123 更新时间:2023-11-28 02:44:17 31 4
gpt4 key购买 nike

我一直在愚弄下面的html代码。我已将 div id ="mainWide"设置为 2500 像素的宽度,这比我的屏幕还宽,我希望在主浏览器窗口中有一个水平滚动条,而不是在 div block 本身中。

我想不出这种行为,目前比我的屏幕宽的区域只是隐藏的,我无法滚动到窗口的这一部分

<html>
<title>Test of width</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>

<div class="w3-sidebar w3-light-grey w3-card-4 w3-animate-left" style="width:140px; line-height:16px;" id="mysidebar">
<div class="w3-bar-block">
<a class="w3-bar-item w3-button w3-border-bottom" href="test1.html">test1</a>
<a class="w3-bar-item w3-button w3-border-bottom" href="test2.html">test2</a>
<a class="w3-bar-item w3-button w3-border-bottom" href="test3.html">test3</a>
</div>
</div>


<div id="mainWide" style="margin-left:140px; width:2500px; height:500px; background-color: #11ffcc;">
My page content
</div>

</body>

</html>

最佳答案

您需要在 body CSS 中应用 overflow-x: auto。请注意左侧的面板不会移动,因为它是固定的

body {
overflow-x: auto;
}
<!DOCTYPE html>
<html>
<title>Test of width</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-sidebar w3-light-grey w3-card-4 w3-animate-left" style="width:140px; line-height:16px;" id="mysidebar">
<div class="w3-bar-block">
<a class="w3-bar-item w3-button w3-border-bottom" href="test1.html">test1</a>
<a class="w3-bar-item w3-button w3-border-bottom" href="test2.html">test2</a>
<a class="w3-bar-item w3-button w3-border-bottom" href="test3.html">test3</a>
</div>
</div>


<div id ="mainWide" style="margin-left:140px; width:2500px; height:500px; background-color: #11ffcc;">
My page content
</div>

</body>
</html>

关于HTML:宽 <div> 不生成水平滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46998157/

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