css布局,li内的文字变成竖向的了,怎么解决?

html-css017

css布局,li内的文字变成竖向的了,怎么解决?,第1张

li内的文字变成竖向了,可以通过css对LI的样式进行定义和修改:

1、给Li设置浮动。加上 float:left

2、对LI设置好相应的宽度width和高度height

3、通过overflow:hidden对超出li宽度的隐藏

相应代码为:

li{float:leftwidth:200pxheight:30pxline-height:30pxoverflow:hidden}

在许多使用场景下,会有让列表内元素竖着排列,高度不够,纵向换行的需求。本文教你如何实现一个竖着的元素排列。

实现元素纵向排列主要靠 css 的 writing-mode 属性和 float 属性。

设置 writing-mode 值为 vertical-lr , 可以使所有子元素纵向排列。

此时发现里面的子元素仍旧是横向排列,但文字变纵向了

再加上 float: left 让元素左排。

此时,元素已经变成纵向排列了,但由于未限制高度,元素将无限向下排列。同时子元素的文字排列方式也变成了纵向。

在给列表加一个高度。并重新设置子元素 writing-mode 属性便可解决

此时效果已经完成,但还有一个奇怪的问题

在添加到某个位置元素直接会跳到这列最后一个,不知这个问题为何会产生,但是在给子元素添加一个宽度后,bug 便神奇的好了。。

总结: writing-mode 是一个很长久的 css 属性了,新的值 vertical-lr 在大部分现代浏览器都已支持,在古老的 ie9 以下,也可用 lr 代替,所以这种实现方式是可兼容的。只是注意某些浏览器需要 --webkit- 或 --ms- 前缀。

writing-mode 属性 --MDN