CSS<img>与<a href>字体同行显示方法与对齐
1.一开始使用php的volist标签conding了这样一段代码:
<volist name="result['list']" id="temp">
<if condition="$temp.level eq 1 ">
<ul id="ul1"><img src="__PUBLIC__/img/{$temp.id}.jpg" width="100px" height="100px" >
<a href="{$temp.link}">{$temp.name}</a></ul>
</if>
</volist>
2.css样式设置:
#ul1,#ul2{
padding-top:10px;
vertical-align:middle;
font-size: 50px;
}
a { text-decoration: none;
color:#333333;
padding-left: 20px;
padding-top: 15px;
}
3.发现虽然图片与超链接里的字体虽然同行显示了,但超链接里的字内边距无法生效,因为<a href></a>在这里不是作为块状元素,所以首先需要将a的css样式添加一个:display:block;属性,成为div元素。
4.接着我们会发现<a href>里的字体到图片下一行去了:
为了使两者同一行添加float属性:
#ul1,#ul2{
float:left;
padding-top:10px;
vertical-align:middle;
font-size: 50px; }
a {
display:block;
float:right;
text-decoration: none;
color:#333333;
padding-left: 20px;
padding-top: 15px; }
超链接字体生效!!
CSS<img>与<a href>字体同行显示方法与对齐的更多相关文章
- DIV横向排列_CSS如何让多个div盒子并排同行显示
如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决 ...
- thinkphp使后台的字体图标显示异常
thinkphp使后台的字体图标显示异常 相似问题 1.thinkPHP的这些图标都不显示了-CSDN论坛https://bbs.csdn.net/topics/391823415 解答: 发现在别的 ...
- href脱离iframe显示
iframe框架页面如下: <!DOCTYPE html><html lang="zh"><head><meta name='viewpo ...
- 详解CSS网页布局中默认字体样式
浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...
- css与jquery、图标字体
*)还能这样选择 header #search input[type="text"] *)按钮常用颜色:#008cBA(字母大小写没有区别) *)清除浮动后,text-align没 ...
- 点击input时,里面默认字体消失显示
点击input时,点击input里面默认字体消失显示: <input type="" name="" id="" value=&quo ...
- HTML,CSS,font-family:中文字体的英文名称 (宋体 微软雅黑)
工作中遇到的问题,上网看到别人整理的,我就记下来,嘻嘻!!! 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 ...
- 在线生成CSS样式和兼容的字体格式
http://www.fontsquirrel.com/tools/webfont-generator 在线生成CSS样式和兼容的字体格式.
- 【转】HTML,CSS,font-family:中文字体的英文名称 (宋体 微软雅黑)
宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 Ming ...
随机推荐
- sublime text3安装、注册及常用插件
由于换电脑,重装系统等问题,总要重装sublime.每次都要查来查去,不如自己记下来,以后再装也方便. 一.下载 官网下载安装包(http://www.sublimetext.com/) :然后直接点 ...
- Inno Setup 自定义界面心得
因为项目需要,需要打 windows 安装包,要求安装界面完全按照需求来.作为没接触过这块儿的服务端宝宝,在此期间踩了很多坑. 坑不提也罢,最终结果圆满,记录下与大部分网上PO出来的做法不太一样的小心 ...
- 大搜车知乎live中的面试题结题方法记录
1.HTML&CSS(分别10分) 1. 一个div,宽度是100px,此时设置padding是20px,添加一个什么css属性可以让div的实际宽度仍然保持在100px,而不是140px? ...
- python函数定义
刚学用Python的时候,特别是看一些库的源码时,经常会看到func(*args, **kwargs)这样的函数定义,这个*和**让人有点费解.其实只要把函数参数定义搞清楚了,就不难理解了. 先说说函 ...
- 接口测试——Java + TestNG 国家气象局接口(json解析)实例
后端测试,主要以测试接口为主.需要代码支撑,近期便找了个天气接口捣鼓了. 使用到的工具是:Eclipse + TestNG + Maven + ReportNG,全国城市编码:http://www.c ...
- 洛谷 P1553 数字反转(升级版)【字符串+STL stack】
P1553 数字反转(升级版) 题目描述 给定一个数,请将该数各个位上数字反转得到一个新数. 这次与NOIp2011普及组第一题不同的是:这个数可以是小数,分数,百分数,整数.整数反转是将所有数位对调 ...
- HDU 1014 Uniform Generator【GCD,水】
Uniform Generator Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- hbmy周赛1--E
E - Combination Lock Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I6 ...
- PhpStorm常用的一些快捷键
Ctrl + G : 跳到当前打开文件的行,输入格式(行数:列数)Ctrl + E : 打开最近编辑的文件列表Ctrl + P : 显示函数的参数信息Ctrl + Q : 快速打开函数的说明 ...
- 如何实现dede首页栏目文章指定调用
如何实现dede首页栏目文章指定调用,首页文章栏目指定ID调用 dobote | 浏览 11891 次 推荐于2016-05-20 10:53:26 最佳答案 {dede:arclist flag=' ...