通过css2.1实现li元素垂直但li内的文字横向
时间: 2024-09-14 14:17:17 浏览: 18
在CSS2.1中,要实现`<li>`元素垂直排列但其内部的文字横向显示,可以通过设置`<li>`元素的`display`属性为`block`或`inline-block`,然后利用`writing-mode`属性来改变文字方向。以下是具体的实现方法:
1. 将`<li>`元素的`display`属性设置为`block`或`inline-block`,这样每个`<li>`元素都会独占一行。
2. 使用`writing-mode`属性设置为`vertical-lr`,这样`<li>`内的文字就会垂直排列。
3. 为了使文字在垂直排列的`<li>`内水平显示,可以设置`text-align`属性为`left`(或`right`,根据具体的布局要求)。
下面是一个简单的示例代码:
```css
ul {
list-style-type: none; /* 去除列表默认的项目符号 */
margin: 0;
padding: 0;
}
li {
display: block; /* 或者 display: inline-block; */
writing-mode: vertical-lr;
text-align: left; /* 文字水平对齐方式 */
/* 其他样式 */
}
```
```html
<ul>
<li>垂直排列的文字1</li>
<li>垂直排列的文字2</li>
<li>垂直排列的文字3</li>
</ul>
```
这段代码中,`ul`内的`li`元素将垂直排列,而每个`li`内的文字则会横向显示。