gpt4 book ai didi

html - 需要帮助使用 CSS 设置从左到右滚动

转载 作者:行者123 更新时间:2023-11-28 10:05:12 26 4
gpt4 key购买 nike

我使用 CSS、HTML 和 jQuery 设计了一个页面。

一切都运行良好,但问题是在底部可见从左到右的可滚动选项。

我在想的是我需要使用 CSS 来设置这些东西,我不确定我是否能够做到。

从上到下的可滚动是可见的,这是必需的,但从左到右的可滚动不应该是可见的。

只有从上到下的可滚动应该在那里:而不是从左到右。

我该如何解决这个问题?

Fiddle

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Employee Management System</title>
</head>
<link href="../CSS/stylenew.css" type="text/css" rel="stylesheet" />

<body>
<div id="header">
<div id="image">
<img src="D:\Binay\ISPL Logo\headerlogo.png" alt="logo" />
</div>
<div id="codeoverheader">Some company PVT. LTD.</div>
<div id="codeoverheader1">Home|Logout</div>
</div>
<div id="header1"></div>
</body>

</html>

CSS

#header {
position:absolute;
top:0;
left:0;
width:100%;
height:header-<length>;
height:17%;
background-color:#004080;
}
#header1 {
position:absolute;
top:15%;
left:0;
width:100%;
height:2%;
background-color:#9ABD2B;
}
#image {
width:100%;
height:200px;
background:url(../url/headerlogo.png)repeat-x 0 0;
text-align:left;
}
#codeoverheader {
left: 1060px;
position: absolute;
top: 12px;
width: 100%;
z-index: 99;
font-size:25px;
font-style:oblique;
color:#0080FF;
}
#codeoverheader1 {
left: 1200px;
position: absolute;
top: 45px;
width: 100%;
z-index: 99;
font-size:25px;
font-style:normal;
color:#0080FF;
}

最佳答案

如果我理解您要尝试做什么,那么您需要的 CSS 是 overflow-x: hidden; 但您需要定义一些宽度才能使其正常工作。如果没有您的 HTML,这只是一个非常通用的解决方案。

html {
width: 100%;
}

body {
width: 100%;
overflow-x: hidden;
}

这应该适用于整个页面,但对于屏幕来说太宽的任何特定元素也可能需要添加 overflow-x: hidden;

关于html - 需要帮助使用 CSS 设置从左到右滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24582849/

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