上述展开信息本来是这样写的,但是很奇怪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等行内元素标签之间出现奇怪空格符号的更多相关文章

  1. 实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;)

    实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...

  2. img 默认是行内元素,它旁边的空格是会保留的

    img 默认是行内元素,它旁边的空格是会保留的.因此图片宽度设置百分百后下面会有点找不出原因的间隙. 解决办法:img{display:block}

  3. CSS里常见的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  4. Html行内元素和块级元素

    1.关于行内元素和块状元素的说明 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display ...

  5. html块级元素与行内元素

    1.关于行内元素和快元素的说明: 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display ...

  6. 为什么transform对行内元素不生效

    注:赶时间的同学可直接下拉到底,看结论. 我使用transform对一个元素进行位移,代码如下: <div class="box"> <span>今天你吃了 ...

  7. CSS中的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  8. CSS块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  9. HTML span标签:用来组合文档中的行内元素

    在DIV+CSS切图布局重构技术中,除了常常使用div标签外也常常使用span标签布局,通常也可以通过对span标签对象设置不同样式实现我们要的美化效果.这里主机吧主要讲的是span标签的定义和用法. ...

随机推荐

  1. JS判断手机还是电脑访问网站

    function check() { let browser = navigator.userAgent;//用户访问的类型 let phone = ["Android", &qu ...

  2. gdb调试线程

    gdb thread apply all bt 如果你发现有那么几个栈停在 pthread_wait 或者类似调用上,大致就可以得出结论:就是它们几个儿女情长,耽误了整个进程. 注意gdb的版本要高于 ...

  3. 关于shared_ptr与weak_ptr的使用(good)

    shared_ptr是带引用计数的智能指针,可以说大部分的情形选择用shared_ptr不会出问题.那么weak_ptr是什么,应该怎么用呢? weak_ptr也是智能指针,但是比较弱,感觉没什么用. ...

  4. (DIjsktra算法) nyoj1401-一场说走就走的旅行

    题目描述: 有一天,孩子回来对我说:“妈妈,听说马尔代夫很不错,放假了我想去玩.”马尔代夫?我也想去!没有人不向往一场说走就走的旅行!“其实我想去的地方很多,呼伦贝尔大草原.玉龙雪山.布达拉宫.艾菲尔 ...

  5. RPC简介

    一:为什么会出现RPC呢? 当公司业务量还是很小的时候,所有的程序都放置在一台机器上,程序之间通过函数或者类来调用.1:当公司的业务发展越来越大,业务线越来越多,公司后端人员也越来越多,分布在不同的业 ...

  6. Centos7安装Mysql5.7方法总结 - 实操手册

    Centos7.x版本下针对Mysql的安装和使用多少跟之前的Centos6之前版本有所不同的,废话就不多赘述了,下面介绍下在centos7.x环境里安装mysql5.7的几种方法:一.yum方式安装 ...

  7. 洛谷P1119 灾后重建 Floyd + 离线

    https://www.luogu.org/problemnew/show/P1119 真是有故事的一题呢 半年前在宁夏做过一道类似的题,当时因为我的愚昧痛失了金牌. 要是现在去肯定稳稳的过,真是生不 ...

  8. java代码的编译执行过程

  9. Spring_xml和注解混合方式开发

    1. spring核心配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&q ...

  10. PHP 连接 Memcached 服务

    1.需要安装php的Memcached扩展,具体安装步骤不做介绍了. 2.php连接memcached的mem.php 文件 <?php $memcache = new Memcached; $ ...