文字纵向排列，不推荐使用，文字少的话尽量用图片会更方便

最新推荐文章于 2025-11-05 20:48:02 发布

最新推荐文章于 2025-11-05 20:48:02 发布 · 101 阅读

文章标签：

#xhtml

本文介绍了一种使用CSS进行特殊布局的方法，重点讲解了writing-mode属性如何实现文本的垂直显示，并提供了具体的代码实例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.zx {width:32px; font-size:12px; font-family:"宋体"; float:left; background:#ccc; }
</style>
<title>无标题页</title>
</head>
<body>
<div class="zx">这是一个纵向排列的行</div>

<div>

这里是原来的设置，后来俺发现只用设上面那几项一就出得来
.in3 {
width:16px!important;
WIDTH: 20px;
padding:1px;
WRITING-MODE: tb-rl;

  语法：writing-mode : lr-tb、tb-rl

  参数：lr-tb：从左向右，从上往下  tb-rl：从上往下，从右向左

TEXT-ALIGN: center;
float:left;
height:95px;
vertical-align: middle;
letter-spacing: 2px;
background-color:#CCCCCC;
font-size:12px;
}
</div>
</body>
</html>

效果如下图：