span不如div的地方

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

效果如下:

样式:

<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> 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏啸天"s blog

天若ocr文字识别工具,集合百度、腾讯、有道、搜狗

1、对于搜狗的接口调用的还是http://ocr.shouji.sogou.com/v2/ocr/json,这个接口识别效果很好,但是对于图片的尺寸有规定。 ...

1K4
来自专栏jojo的技术小屋

原 一、JavaScript简介

作者:汪娇娇 时间:2017年11月4日 一、组成部分 ? JavaScript由三部分内容组成: (1)ECMAScript(核心) (2)DOM(文档对象模...

3008
来自专栏企鹅号快讯

Webpack,请开始你的表演(一)

这是一篇 Webpack 入门文章,之所以写这篇文章,原因有二: 工作和学习中一直在用,但是总有一些内容理解的不够; 自己目前检索到的有关 Webpack 的文...

2157
来自专栏cnblogs

D3、openlayers的一次尝试

近期尝试了一个webgl相关的内容,有些小激动,及时分享一下我的测试示例,效果如下: ? 此示例分从业务角度分为两部分,一个部分为d3展示的柱图,另一部分则为用...

2867
来自专栏非著名程序员

拖拽,自由组合,让你的开发更加简单,用户更方便

今天给大家推荐一个自由拖拽,自由组合的控件,这个控件是我自定义写的。通过它,我们可以自由拖拽,自由组合实现一个界面,满足一个用户自由组合界面的需求。这里不是通过...

2376
来自专栏Phoenix的Android之旅

如何加载一张超大高清图

"大图片加载容易做,可是这个需求要保证在不OOM的情况下能放大查看,还要能清晰展示,这得怎么呢?",愁眉苦脸的小呼说到。

942
来自专栏魏艾斯博客www.vpsss.net

屏幕 GIF 动态图捕获软件及录制过程

作为站长有时候需要录制屏幕 GIF 动态图片,就得现学现卖。这不魏艾斯博客在使用遨游浏览器的过程中遇到一些 bug 需要提交给官方,遨游技术员希望老魏提供一段正...

2402
来自专栏我分享我快乐

响应式图片解决方案

来源:学生做的网站,方便大家学习交流设计与技术 http://www.uidask.com/index.php 网站的平均加载已经到了近 2MB 并在不断地...

43315
来自专栏Material Design组件

后台系统设计(下篇:输入)

·容错格式,允许用户输入多种格式,并智能的处理从而满足程序的数据要求。例如电话输入,允许用户输入空格和 —,系统后台自动清理数据以满足格式要求,而不是报错提示。

1432
来自专栏大数据钻研

HTML 交互式表单验证

在 HTML 中创建表单总是有点复杂。你首先得将 HTML 标记编写正确,然后需要确保每一个表单项在提交之前都有一个可用的值,最后还需要在有问题时用提醒来告知用...

4763

扫码关注云+社区

领取腾讯云代金券