Home  >  Article  >  Web Front-end  >  How to hide the horizontal scroll bar in css

How to hide the horizontal scroll bar in css

藏色散人
藏色散人Original
2021-03-30 11:53:216108browse

How to hide the horizontal scroll bar in css: First create an HTML sample file; then add a style to the body; then add "overflow-x:hidden;" to the style definition to hide the horizontal scroll bar.

How to hide the horizontal scroll bar in css

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

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. [Recommended learning: css video tutorial]

How to hide the horizontal scroll bar in css

In the style definition, we add

overflow-x: hidden;

style.

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!

Statement:
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