text-align: justify;不能均匀分布问题
本文地址:http://www.cnblogs.com/veinyin/p/7617610.html
对于text-align来说,一般我们都是使用居中这个属性值,突然今天需要达到这样一个效果:
对,就是“上海活动”这四个字在所在的区域均匀分布
<li class="current">
<h3>上海活动</h3>
<p>夜上海新景观探索</p>
<div class="img"><img src="data:images/img4.png" alt=""></div>
</li>
上面是HTML代码
li.current h3 {
width: 203px;
margin: 0 24px;
padding: 0 11px;
font-size: 20px;
line-height: 20px;
text-align: justify;
}
第一反应当然是这样做,没错,当然有但是!
居然效果是左居中,那给个:after伪类试试看?
li.current h3:after {
display: inline-block;
content: '';
overflow: hidden;
width: 100%;
height:;
line-height:;
}
嗯,这次总算是均匀分布了,很完美,但是! 下面这么大一块空白是什么情况?
给:after伪类高度和行高都是0啊,不是伪类给撑高的,是哪来的?
审查元素看看吧那就
看来果然是h3的问题,那就给它个固定高值:
.section5 li.current h3 {
width: 203px;
margin: 0 24px;
padding: 0 11px;
font-size: 20px;
line-height: 20px;
text-align: justify;
height: 20px;
}
完美,结束撒花~
text-align: justify;不能均匀分布问题的更多相关文章
- __attribute__ ((section(".text")))的测试
一.测试原因 在学习u-boot的环境变量过程中,看到有如此的代码,现对涉及到的内容进行实验测试. 二.测试目的 1.了解gcc允许对段的属性进行更改的方法. 2.解决”ENV_IS_EMBEDDED ...
- Flutter 布局(二)- Padding、Align、Center详解
本文主要介绍Flutter布局中的Padding.Align以及Center控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Padding A widget that insets ...
- HTML 标签元素的 align 属性
align 属性规定段落中文本的对齐方式. 有 left right center justify 这些参数 left right center 就是左对齐 右对齐 中间对齐 justify ...
- Extjs Vbox布局方式,以及align种类,flex,pack属性含义简介
VBox布局方式,熟悉下一下几个主要属性: 一.align:字符类型,指示组件在容器内的对齐方式.这个是基于容器的左上角来排列的.pack不同,pack是根据容器的最上边来显示的. 1.left(默认 ...
- Flutter学习笔记(22)--单个子元素的布局Widget(Container、Padding、Center、Align、FittedBox、Offstage、LimitedBox、OverflowBox、SizedBox)
如需转载,请注明出处:Flutter学习笔记(22)--单个子元素的布局Widget(Container.Padding.Center.Align.FittedBox.Offstage.Limited ...
- ThinkPHP + Discuz 整合方法
ThinkPHP + Discuz 整合方法以下是Discuz6的整合方法,discuz5请按照里面的说明进行相应的修改,也可以使用了. 1.在项目的action目录下信件PublicAction.c ...
- PHP检测用户名是否存在
reg.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- 160908、前端开发框架Semantic UI
简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...
- delphi HTML代码
################################属性 设置################################################字体设置{//-------- ...
随机推荐
- 在本地数据库目录或系统数据库目录中已经存在数据库别名""的解决办法
在创建数据库时遇到数据库别名已存在的问题时,可以: 1. 首先用 db2 list database directory 命令看在系统数据库目录(System Database Directory)中 ...
- PAT 甲级 1132 Cut Integer
https://pintia.cn/problem-sets/994805342720868352/problems/994805347145859072 Cutting an integer mea ...
- Jarvis OJ平台basic部分wirteup
Base64? 题目描述: GUYDIMZVGQ2DMN3CGRQTONJXGM3TINLGG42DGMZXGM3TINLGGY4DGNBXGYZTGNLGGY3DGNBWMU3WI=== Base3 ...
- C 语言疑难杂症 [转:http://blog.chinaunix.net/uid-20688544-id-1894880.html]
无聊在网上找了些C语言的东东练一下手,竟然发现其实还有好多细节之前,没注意到,该好好复习一下先. 解决掉的问题先不发出来,把疑问的先做个笔记,过几天解决了就回来修改补上. #include < ...
- ADO之connection
connection 主要成员 connectionstring 属性 连接字符串 open() 打开数据库连接 close() ...
- jenkins 配置git 学习
由于Jenkins没有默认安装Git插件,需要Git库同步时候,需要手动选择安装git插件 在“系统管理”->“管理插件”中找到,“可选插件”选项卡.“过滤“(一个名为过滤的搜素窗口)中可以用键 ...
- 转---Post/Redirect/Get pattern
今天重新认识了Post/Redirect/Get pattern, 感谢hip-hop的session, 一下帮助我理清了概念和思路. 谈到pattern,首先要清楚它为了什么而产生: PRG (参见 ...
- 给自己的小练习19-[kuangbin带你飞]专题九连通图
没有写题解.补一波 Network of Schools 问题1:求有向图中入度为0的点个数 问题2:使得整个图变成一个联通分量 问题1直接缩点统计 问题2=max(入度为0的点,出度为0的点),注意 ...
- BZOJ1997 [Hnoi2010]Planar 【2-sat】
题目链接 BZOJ1997 题解 显然相交的两条边不能同时在圆的一侧,\(2-sat\)判一下就好了 但这样边数是\(O(m^2)\)的,无法通过此题 但是\(n\)很小,平面图 边数上界为\(3n ...
- Redis的键值命令、服务器命令
Redis提供了丰富的命令对数据库和各种数据类型进行操作,这些命令可以在Linux 终端使用.在编程时,比如各类语言包,这些命令都有对应的方法. 键值命令 服务器命令 获取数据库中所有键名 >k ...