温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

html如何设置div横向滚动条不显示

发布时间:2022-01-18 17:16:10 来源:亿速云 阅读:987 作者:iii 栏目:web开发

本文小编为大家详细介绍“html如何设置div横向滚动条不显示”,内容详细,步骤清晰,细节处理妥当,希望这篇“html如何设置div横向滚动条不显示”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

在html中,可以利用style和“overflow-x”属性设置div横向移动滚动条不显示,当属性的值设置为“hidden”时,就会不提供横向滚动机制,语法为“<div style="overflow-x:hidden">”。

本教程操作环境:windows10系统、HTML5版、Dell G3电脑。

html怎样设置div横向滚动条不显示

overflow-x属性指定如果它溢出了元素的内容区是否剪辑左/右边缘内容。

语法为:

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

其中参数表示如下:

html如何设置div横向滚动条不显示

示例如下:

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
div
{
width:110px;
height:110px;
border:thin solid black;
overflow-y:hidden;
}
</style>
</head>
<body>
<div style="overflow-x:hidden;"><p style="width:140px">
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.' 
</p></div>
<p>Overflow-x指定是否要剪辑的左/右边缘的内容.</p>
<p>Overflow-y指定是否要剪辑的顶部/底部边缘的内容</p>
</body>
</html>

当没有给div元素添加style="overflow-x:hidden;"样式时,输出结果如下:

html如何设置div横向滚动条不显示

上述示例添加了该样式,输出结果如下:

html如何设置div横向滚动条不显示

html是什么

html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体,html文本是由html命令组成的描述性文本,html命令可以说明文字,图形、动画、声音、表格、链接等,主要和css+js配合使用并构建优雅的前端网页。

读到这里,这篇“html如何设置div横向滚动条不显示”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI