prepend和append同时使用的时候，prepend中的内容不显示

前几天做项目的时候，遇到一个需求，需要做一个类似于下面的样式：

当我看完element的时候，自信满满，这不就是prepend和append嘛，简单！！！此时的我不会想到后续经历的坎坷。

当我写完之后，发现前面的”￥”不显示，我当时认为可能”￥”这个字符有问题，换个字就好了，结果还不行。我去浏览器中找了，发现这部分的字符明明存在，可为什么不显示；

我又去查看style样式区，我发现这部分宽度压根没有占用空间。

我的“你好”字符去哪里了！！！难道……被浏览器吃了！！浏览器你把我的字符给我吐出来！

嘿嘿… 开个玩笑。

然后我发现，单独使用，是显示的。

一旦一起使用prepend和append，前面就不显示了。太奇怪了。那我就认为，prepend和append冲突，不能一起使用，element的里面也没有同时使用，百度这俩冲突的文档，没有……

那我换个实现方式呗！

代码：

<template slot="prepend">￥</template>
<template slot="suffix">元</template>

你看，prepend和suffix相处的就很好。

但是，我心里还是纠结prepend和append，没有找到解决这两个冲突的文档，element文档里也没说这俩一起用会冲突呀。徒弟搞不定找师父王叨叨。师父那里一试，可以一起显示啊，你说我咋没想到单独写个demo测一下呢，项目里面毕竟有太多其它因素影响，太打脸了。

然后，师父提到了“样式覆盖”，我就对比样式，虽说有些样式被覆盖了，但是并不会影响正常显示呀！！

在师父指导下，继续找呀找呀，我就看到了下面这块，罪魁祸首！！！！！

然后我做了这么一件事

.index .clock_height .el-input-group--append>div{font-size: 14px !important;
}

这里发生了一个小插曲，大家都知道css样式，后面会覆盖前面的，font-size: 14px；单独加这个按理说是没有问题的，在我自己电脑上也是改过来的，正常显示了。但是，一发版，到了测试服上，它就被font-size: 0px；干掉了，没办法，我只能请出老大哥了!important，完美解决。

<template slot="prepend">￥</template>
<template slot="append">元</template>

经过这个问题，意识到：要依据实际找原因呢，不能按照想法推测，要定位问题呢！！

（上面两个html模块代码，其实都是vue；这里用html是因为我发现用vue不显示）

prepend和append同时使用的时候，prepend中的内容不显示相关推荐

div中的内容水平居中显示
今天总结下几种div中的内容水平居中的几种方法,至于好坏我还不是很清楚,就不阐述,希望有大佬能指示下,小弟不胜感激 1.首先是常规的 margin属性,上下固定,左右自适应 <style> ...
java 只显示文本文件_Java设计并实现一个应用程序,能够读取一个文本文件中的内容并显示,同时能够计算出文本中的行数。...
展开全部 java编写显示文本的应用程序, 需要用到图形界面GUI编程技术. 步骤一: 需要搭建一个整体的外观32313133353236313431303231363533e4b893e5b19e3 ...
android 布局： LinearLayout如何使TextView中的内容居中显示
在LinearLayout布局中: <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android&quo ...
编写js代码，实现根据系统时间显示问候语的功能，通过改变div中的内容，显示不同问候语
要求如下: 6点之前--凌晨好 9点之前--早上好 12点之前--上午好 14点之前--中午好 17点之前--下午好 19点之前--傍晚好 22点之前--晚上好 22点之后包括22点--夜里好 < ...
java中标签内容居中显示_图形标签中图像上的figcaption标签的居中和对齐宽度
我花了两天时间试图解决无花果/无花果问题无济于事 . 我有一个Django应用程序,用户可以在其中提交图像,我正在使用图形和figcaption标签来显示带有附带 Headers 的图像 . 主要问题 ...
textarea中文本内容垂直显示（适合蒙文字体）
display: table-cell; vertical-align: middle; 转载于:https://www.cnblogs.com/NuLLBTF/p/9167840.html
ajax点击更改div,jquery ajax双击div可直接修改div中的内容
jquery ajax双击div可直接修改div中的内容发布于 2017-04-03 17:26:16 | 127 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框 ...
CSS中隐藏内容的3种方法及属性值
在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等等. 使用CSS即可使以上提到的内容隐藏起来,几种隐 ...
prepend与append的区别
prepend与append的区别 jquery中appendTo和prependTo函数都可以将元素添加到另一个元素,但是两个函数还是有一定却别的appendTo(content): 是将所有匹配的 ...

prepend和append同时使用的时候，prepend中的内容不显示

prepend和append同时使用的时候，prepend中的内容不显示相关推荐

最新文章

热门文章