jsp页面+CSS样式实现不同个数文字两端对齐

最新推荐文章于 2024-08-07 15:38:37 发布

蓝冰520

最新推荐文章于 2024-08-07 15:38:37 发布

阅读量4.9k

点赞数

分类专栏： Css Html/Jsp 文章标签： css jsp 两端对齐

本文链接：https://blog.csdn.net/kelaode_rui/article/details/71531187

版权

Html/Jsp 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Css

0 篇文章 0 订阅

订阅专栏

通常会使用加空格或者&nbsp；实现占位，但是效果总是不好，兼容性也差强人意,所以研究了一下发现使用Css样式就可以实现文字两端对齐的方法：
使用letter-spacing属性来调整文字间的字符间隔。
效果图如下：
这里写图片描述

代码如下所示：

<head>
</head>
<style type="text/css">
.f6{
    text-align: center;  
    width: 6em; /*这个值是看最长能显示几个文字，如x，则为x em*/ 
}
.f5{
    letter-spacing:0.25em;  /*如果需要y个字两端对齐，则为(x-y)/(y-1),这里是（6-5）/(5-1)=0.25em */ 
    margin-right:-0.25em;  /*同上*/
}
.f4{
    letter-spacing:0.67em;   
    margin-right:-0.67em;
}
.f3{
    letter-spacing:1.5em;   
    margin-right:-1.5em;
}
.f2{
    letter-spacing:4em;   
    margin-right:-4em; 
}
</style>
<body>
<div class="div1">
    <ul>
    <li><span class="f6">扣税凭证种类</span></li>
    <li><span class="f5">进项税性质</span></li>
    <li><span class="f4">项目名称</span></li>
    <li><span class="f2">部门</span></li>
    <li><span class="f3">报销人</span></li>
    </ul>
</div>
<body>