Home > Developer > Web Develop
In the front-end UI design, the production of Web pages is very troublesome, deep feeling! Encounter too many do not understand, or the first time to see, you need to go online to find information! Horizontal scroll bar is one of the problems I encountered, in fact, it is very simple, but in a few projects have used the horizontal scroll bar so take out to say a bit.
Requirements interface---such as: a div inside a lot of buttons, beyond the width of the div, the horizontal scroll bar appears below. In fact, certainly more than a few button, it can be added dynamically, so the width of the parent Div is certainly not enough, but the layout of the interface is also required, so have to get a horizontal scroll bar.
The code is as follows:
<!doctype html>
<meta charset= "Utf-8" >
<title> go to partition </title>
<body>
<div style= "height:60px;
Overflow-x:scroll;
White-space:nowrap;
width:500px; " >
<button style= "HEIGHT:38PX;
margin-top:2px; " >1 Division, </button>
<button style= "HEIGHT:38PX;
margin-top:2px; " >2 Division, </button>
<button style= "HEIGHT:38PX;
margin-top:2px; " >3 Division, </button>
<button style= "HEIGHT:38PX;
margin-top:2px; " >4 Division, </button>
<button style= "HEIGHT:38PX;
margin-top:2px; " >5 Division, </button>
<button style= "HEIGHT:38PX;
margin-top:2px; " >6 Division, </button>
<button style= "HEIGHT:38PX;
margin-top:2px; " >7 Division, </button>
<button style= "HEIGHT:38PX;
margin-top:2px; " >8 Division, </button>
</div>
</body>
Implementation of html/css/js-horizontal scroll bar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
