前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >span不如div的地方

span不如div的地方

作者头像
用户1075292
发布于 2018-01-23 03:30:43
发布于 2018-01-23 03:30:43
1.8K0
举报
文章被收录于专栏:听雨堂听雨堂

页面中产生格式化的效果,我一般比较喜欢用span,因为其本身就是inline的,但是,在进行精细控制时就不行了,比如我想要这个效果,每行由三个部分构成:时间,柱状图,数值,分布用span表示,用br换行。但出来的效果,两行之间总有间隙。试了很多办法都没有搞定,最后,把span换成div,一下就成了。

效果如下:

样式:

代码语言:js
AI代码解释
复制
<style type=text/css>
 body{padding:0;margin:0;}
 .dat,.valu,.cnt{margin:0 0 0 5px;padding:0;font-size:12px;border:0px solid red;height:14px;overflow:hidden;display:inline-block;float:left;}
 .lbox{border:0px solid green;height:15px;overflow:hidden;display:inline-block; vertical-align:text-top;}
 .dat{width:100px;text-align:right;}
 .cnt{
   background-color:#D9E4F8;
   width:200px;
 }
</style> 
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2009-07-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【云+社区年度征文】2020一网打尽CSS世界
一个水平流上只能单独显示一个元素,因此理论上都可以配合clear属性来清除浮动带来的影响。
奋飛
2020/12/14
5.1K0
CSS实现自适应分隔线的N种方法
https://github.com/XboxYan/notes/issues/12
ConardLi
2020/02/20
2.3K0
CSS实现自适应分隔线的N种方法
自定义按钮~自适应布局~常见bug
一、元件 自定义按钮 可用button或a   display为 inline-block 方便设置格式,通过 padding,height,line-height,font-size设置按钮的大小 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>BUTTON</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 a { 8
超然
2018/08/03
1.2K0
css 定位
正常文档流模式下,后面的dom元素覆盖前面的,如果将前面的元素设置了relative将提升它自身的层级
超然
2018/08/03
2.8K0
css 定位
模拟微信支付宝密码输入框的效果
本文介绍了一种模拟微信和支付宝密码输入框的表单验证效果,通过在输入框内使用 tel 和 input 元素进行输入,并利用 CSS 和 JavaScript 进行样式和验证效果的制作。
练小习
2017/12/29
1.3K0
模拟微信支付宝密码输入框的效果
Hexo博客Next主题相册搭建
Hexo博客Next主题相册搭建 在blog文件夹/source下创建photos文件夹,在photos文件夹创建index.md文件,编辑index.md文件,写入以下代码:
AomanHao
2022/01/14
4590
7b2美化-首页添加导航会员区块
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/17
7740
大一新生HTML期末作业,网页制作作业——海鲜餐饮网站登录页面(单页面)HTML+CSS+JavaScript
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的,本网页适合修改成为各种类型的产品展示网页,比如美食、旅游、摄影、电影、音乐等等多种主题,希望对大家有所帮助 一、网站题目👨‍🎓 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。 <hr>
IT司马青衫
2022/08/13
1.4K0
大一新生HTML期末作业,网页制作作业——海鲜餐饮网站登录页面(单页面)HTML+CSS+JavaScript
关于 vertical-align 你应该知道的一切
vertical-align,写过 CSS 的朋友们肯定都知道这个属性的作用,顾名思义,垂直对齐,主要目的用于将相邻的文本与元素对齐。MDN 中对它的定义如下:
政采云前端团队
2020/03/19
2.8K0
关于 vertical-align 你应该知道的一切
百度前端学院js课堂作业合集+分析(更新中...)
第一课:简陋的登录框 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <ti
xing.org1^
2018/05/17
1.3K0
校园学生网页设计HTML
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主    💂 作者主页: 【主页——🚀获取更多优质源码】   🎓  web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】   🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】  🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】  🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】  🥇  关于作者:
IT司马青衫
2022/08/10
1.8K0
校园学生网页设计HTML
42个来自《 CSS世界》中的实用技巧
但是要注意,当p的内容为英文单词组成的时候,如果单词过长,而不是“ pppppppppppppppppppppppppppppp”这样的一次,会被视为一个单位而造成超过div的尺寸。
winty
2021/01/05
1.1K0
CSS魔法堂:深入理解line-height和vertical-align
前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊。。。。。。于是通过本篇来一探究竟:) line-height到底有多height? 行距、行间距傻傻分不清  首先看看“有道词典”的解析! Leading = Line Space + Font Size(即是 行距 = 行间距 + 字体大小) Leading: 指相邻文本行间上一个文本行基线和下一文本行
^_^肥仔John
2018/01/18
1.9K0
CSS魔法堂:深入理解line-height和vertical-align
大一作业HTML网页作业 HTML校园篮球网页作业(12个页面)
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 💬历任研发工程
IT司马青衫
2022/08/14
1.2K0
大一作业HTML网页作业 HTML校园篮球网页作业(12个页面)
CSS笔记
文本字体 font-family:设置字体 font-size:字体大小 font-style:斜体(normal正常,italic斜体,oblique偏斜体) font-weight: 加粗(normal正常,bold粗体,bolder特粗,lighter特细体) font-variant:字体变体 letter-spacing:字母间距 word-spacing:单词间距 text-decoration: 文字修饰(underline下划线,overline上划线,line-through删除线) te
菜鸟雷
2020/10/23
1.9K0
前端基础篇之CSS世界
我想你每天写css代码有时候也会觉得很痛苦:这个布局的css怎么这么难实现!我也经常会有这种感觉,一个看似简单的布局总是要琢磨半天才能实现,偶尔还会出现一些怪异的超出理解的现象。这是因为我们对css只是大概知道个形,并没有看透css的本质。在同事的推荐下我阅读了张鑫旭老师的《css世界》,才发现css跟想象中的不太一样。本文为《css世界》个人总结笔记,为缩减篇幅丢弃了张老师冗余的小幽默,丢掉了些含金量较低的章节内容,因为ie已经被淘汰出局,所以有关css兼容性的地方也全部忽略不记,同时对个人觉得不易理解的地方加上了一些自己的理解和验证,所以错误之处还望指正。顺便推荐个好用的在线代码编辑工具,国内镜像站点,方便各位对本文实例进行测试。另外本文会随着作者对css的更深入理解而逐步更新,希望到最后能够文如标题展现出真正的css世界。
Nealyang
2019/10/14
2.1K0
前端基础篇之CSS世界
49个常用的CSS代码片段,建议整理收藏
text-shadow 为网页字体添加阴影,通过对text-shadow属性设置相关的属性值。
前端达人
2021/07/16
2.2K0
【web课程设计】HTML+CSS仿QQ音乐网站
](https://blog.csdn.net/bigwhiteshark/category_11924503.html)
IT司马青衫
2022/08/11
1K0
【web课程设计】HTML+CSS仿QQ音乐网站
伪类以及伪元素的一些使用小技巧
练小习
2017/12/29
9580
WordPress网站B2主题会员展示模块
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/17
1K0
WordPress网站B2主题会员展示模块
相关推荐
【云+社区年度征文】2020一网打尽CSS世界
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文