span i s等行内元素标签之间出现奇怪空格符号

上述展开信息本来是这样写的,但是很奇怪windows下的测试环境支付时间前面莫名其妙多了个小方框
<p>
<span><i>收货人:</i>{remark.name}</span>
<span><i>收货手机号:</i>{remark.phone}</span>
<span><i>收货地址:</i>{remark.address}</span>
<span><i>支付时间:</i>{remark.payTime}</span>
</p>
一般是由于行内元素之间在换行时会产生一个换行符号,然后会占用一定的宽度,并且这个宽度是小于一个空格的.
解决方法如下:
1.将span元素写在一行,但是较多的话看着就不方便了;
2.js里拼接字符串,再用innerHtml显示出来, 使用一些组件就不好拼接了;
3.将换行元素的父元素字体大小设为:font-size:0 ,前提是得浏览器支持这个属性;
4.这样写:
<p>
<span><i>收货人:</i>{remark.name}</span
><span><i>收货手机号:</i>{remark.phone}</span
><span><i>收货地址:</i>{remark.address}</span
><span><i>支付时间:</i>{remark.payTime}</span>
</p>
然而,我遇到的bug不一般,用以上的方法统统无效,为啥呢 ???
原来是因为我的span与i标签之间看似没有空格,实则有个隐形的的空格(就是按左右键得两下才能移过那个小箭头),
于是,把span标签重写一遍就好啦,莫名的小空格~~~
span i s等行内元素标签之间出现奇怪空格符号的更多相关文章
- 实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;)
实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...
- img 默认是行内元素,它旁边的空格是会保留的
img 默认是行内元素,它旁边的空格是会保留的.因此图片宽度设置百分百后下面会有点找不出原因的间隙. 解决办法:img{display:block}
- CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- Html行内元素和块级元素
1.关于行内元素和块状元素的说明 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display ...
- html块级元素与行内元素
1.关于行内元素和快元素的说明: 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display ...
- 为什么transform对行内元素不生效
注:赶时间的同学可直接下拉到底,看结论. 我使用transform对一个元素进行位移,代码如下: <div class="box"> <span>今天你吃了 ...
- CSS中的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- CSS块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- HTML span标签:用来组合文档中的行内元素
在DIV+CSS切图布局重构技术中,除了常常使用div标签外也常常使用span标签布局,通常也可以通过对span标签对象设置不同样式实现我们要的美化效果.这里主机吧主要讲的是span标签的定义和用法. ...
随机推荐
- mciSendString 多线程播放多首音乐 & 注意事项
昨天晚上遇到一个问题: 使用 mciSendString 控制播放多首音乐的时候,出现最后一次播放的音乐无法通过 mciSendString ("close mp3") 关闭音乐 ...
- 第二十七节,IOU和非极大值抑制
你如何判断对象检测算法运作良好呢?在这一节中,你将了解到并交比函数,可以用来评价对象检测算法. 一 并交比(Intersection over union ) 在对象检测任务中,你希望能够同时定位对象 ...
- python爬虫获取图片
import re import os import urllib #根据给定的网址来获取网页详细信息,得到的html就是网页的源代码 def getHtml(url): page = urllib. ...
- Luogu P1251 餐巾计划问题
题目链接 \(Click\) \(Here\) 看到其他人都是用费用流写的,我只能表示:动什么脑子?暴力就完事了! 嗯,这个题应该是一个相当显然的上下界最小费用可行流模型,所以跑就完事了. \(s - ...
- Vue(基础七)_webpack使用工具(下)
一.前言 1.webpack.config文件配置 2.webpack打包css文件 ...
- ES6(promise)_解决回调地狱初体验
一.前言 通过这个例子对promise解决回调地狱问题有一个初步理解. 二.主要内容 1.回调地狱:如下图所示,一个回调函数里面嵌套一个回调函数,这样的代码可读性较低也比较恶心 2.下面用一个简单的例 ...
- CodeForces11D 状压dp
http://codeforces.com/problemset/problem/11/D 题意 给定一个简单图,输出其中的简单环的数目.简单环的含义是,不包含重复顶点.重复边的环. 1 <= ...
- HTML常用提交按钮
1. 标签=元素 disabled(不可操作) readonly(只读) placeholder(提示文本) autofocus(自动获焦) autocomplete=”on(默认.规定启用自动 ...
- MySQL高可用架构之Mycat-关于Mycat安装和参数设置详解
MySQL高可用架构之Mycat-关于Mycat安装和参数设置详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Mycat介绍 1>.什么是Mycat Mycat背后是 ...
- GlusterFS 分布式文件系统的使用入门-管理GlusterFS卷
GlusterFS 分布式文件系统的使用入门-管理GlusterFS卷 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.卷的扩容 您可以根据需要在群集联机且可用时扩展卷.例如,您 ...