Home > Web Front-end > Front-end Q&A > How to hide the horizontal scroll bar in css

How to hide the horizontal scroll bar in css

藏色散人
Release: 2023-01-05 16:09:34
Original
3058 people have browsed it

How to hide the horizontal scroll bar in css: first write a div in the html; then add a style to the body; finally add the statement "overflow-x: hidden;" to the style definition to hide the horizontal scroll strip.

How to hide the horizontal scroll bar in css

The operating environment of this article: Windows 7 system, Dell G3 computer, HTML5&&CSS3 version.

We first write a div in the html. Under normal circumstances, there is no scroll bar.

How to hide the horizontal scroll bar in css

When the content of our page is very long, or we actively set a large width, there will be scroll bars.

How to hide the horizontal scroll bar in css

Run the page and you can see scroll bars appear.

How to hide the horizontal scroll bar in css

In order to hide this scroll bar, we can first add a style to the body.

How to hide the horizontal scroll bar in css

In the style definition, we add the style

overflow-x: hidden;
Copy after login

. [Recommended learning: css video tutorial]

How to hide the horizontal scroll bar in css

When you run the page again, you can see that the scroll bar on the page is gone.

How to hide the horizontal scroll bar in css

This method hides the scroll bar. When the content is very long, part of the content will be hidden. Because it needs to be considered carefully, it is best to set a maximum width. , let it wrap automatically.

How to hide the horizontal scroll bar in css

The above is the detailed content of How to hide the horizontal scroll bar in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template