Use the scroll bar


开发工具与关键技术:vs与css

作者:戴怡斌 

撰写时间:2019年5月15日

I believe we used computers, mobile phones, used to mean that you also used the scroll bar I have said today,

What the scroll bar is never learned do not know. But you must be used.

The scroll bar is when you phone, computer class capacity is greater than the height of your cell phone screen computer, he will form a scroll bar, scroll bar the use of very wide, so (you know -_-).

You can use the scroll bar plug-in, you can own knock, plug-ins, then recommend the use of bootstrap4 this series (really not advertise).

I would just knock, like, knock no plug-ins, plug-ins have a scroll bar will be less knock a lot of code, of course, that you have to understand the meaning,

<linkhref="~/HospitalOutpatient/bootstrap4.1.3dist/css/bootstrap.min.css"rel="stylesheet" />

bootstrap4 I use 4.1 (do not know if I have a new version), the first reference js, I use the ul tag, of course they like. First look css part
Here Insert Picture Description
too much capacity li class label inside, close up, and do not affect the viewing, ul tag has a default style that will be underlined, so it must first lift the default style.

list-style: none;这一句就是解除li标签默认样式的代码,

There is not to add floating, floating reasons can not add width is not, and can not say no width, that will disrupt your deployment, almost that he tried to know.
Here Insert Picture Description

I also added a li tag span tags, span tags for the parent element of distraction. Directly width and height.

Remember that the line element within a span, high time widening make it into block-level element, or set the width and height is useless. Row may be provided within the block-level elements.

display:inline-block:这一句代码就是把span标签设置成行内块级元素。

Some people would argue that without a Floating how to make li tag side by side, this time you can use the table tag ah, you can also use the following code for these two

display:table-row; display:table-cell;  第一句可以把ul标签转化成tr,第二句就是转化成td,效果都是并排,相当于浮动,再某一方面比浮动还好。

最后图2中第一句里面的overflow-x:scroll;这一句就是核心,横向滚动条就靠他了。如果要是想要竖向滚动条就改成overflow-y:scroll;就可以了。X轴y轴,高中数学,很多人的噩梦。

The final step is the renderings, renderings goes to watch, thank you point came in small partner, there is a problem it can be said oh in the comments area.
Here Insert Picture Description

Guess you like

Origin blog.csdn.net/weixin_44561520/article/details/90256826