小程序text组件内部上边距的问题
index.wxml:
<view class="slogan">
<text>
建立跨文化的全球视野,做世界公民
</text>
</view>
index.wxss:
.slogan{
padding:19rpx 0;
background-color: #39B371;
text-align: center;
color:#FFFFFF;
}
.slogan>text{
font-size:20rpx;
line-height: 20rpx;
}
效果:
明显看到上边距多了,我们将text设置为block块:
.slogan>text{
font-size:20rpx;
line-height: 20rpx;
display: block;
}
检查下来发现text有个内边距。
这个问题,解决也很简单,就是text内容不要写成几行,一行就可以了:
<view class="slogan">
<text>建立跨文化的全球视野,做世界公民</text>
</view>
对,就是这么简单。
题外话,text更像h5里面的span而不是p,并不是一个块级元素。
小程序text组件内部上边距的问题的更多相关文章
- 微信小程序_(组件)icon、text、rich-text、progress四大基础组件
微信小程序基础组件官方文档 传送门 Learn 一.icon图标组件 二.rich-text富文本组件 三.text文本组件 四.progress进度条组件 一.icon图标组件 type:icon的 ...
- 微信小程序自定义组件的使用以及调用自定义组件中的方法
在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说 ...
- 微信小程序弹窗组件
概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...
- 小程序web-view组件
不久前微信小程序发布了web-view组件,这个消息在各个圈里引起不小的涟漪.近期正好在做小程序的项目,便研究了一下这个让大家充满期待的组件. 1,web-view这个组件是什么鬼? 官网的介绍: ...
- 小程序input组件获得焦点时placeholder内容有重影
这个问题是小程序input组件的bug,目前的解决办法可以,在input标签上加一个其他标签,显示placeholder内容,获得焦点时消失,失去焦点时候再让其显示 <view class='i ...
- 微信小程序倒计时组件开发
今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...
- [转]小程序web-view组件
本文转自:https://www.cnblogs.com/-nothing-/p/7910355.html 1,web-view这个组件是什么鬼? 官网的介绍:web-view 组件是一个可以用来承载 ...
- 微信小程序的组件总结
本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...
- 微信小程序_(组件)scroll-view可滚动视图
微信小程序scroll-view组件官方文档 传送门 提前准备:使用<view>组件制作五条撑满的横向区域 <!--index.wxml--> Cynical丶Gary < ...
随机推荐
- 学习笔记——TCP“三次握手”和“四次挥手”,简单介绍
TCP/IP协议中,TCP协议提供可靠的连接服务,采用“三次握手”建立一个连接. (1)第一次握手:客户端发送SYN包(SYN=j)到服务器,并进入SYN_SEND状态,等待服务器确认. (2)第二次 ...
- 用c++编程:用两个栈实现队列
栈s1和栈s2,栈s1专门为入队,栈s2专门为出队. 入队: 当s1和s2都为空时,直接入队s1. 当s1为空,s2不为空时,把s2的元素都倒回s1,然后再入队s1 出队: 当s2不为空时,直接出队s ...
- nyoj_102_次方求模_201308221547
次方求模时间限制:1000 ms | 内存限制:65535 KB 难度:3描述 求a的b次方对c取余的值 输入 第一行输入一个整数n表示测试数据的组数(n<100)每组测试只有一行,其中有三 ...
- 最小堆的两种实现及其STL代码
#include<cstdio> #include<iostream> #include<algorithm> #include<vector> boo ...
- CF #323 DIV2 D题
可以知道,当T较大时,对于LIS,肯定会有很长的一部分是重复的,而这重复的部分,只能是一个block中出现次数最多的数字组成一序列.所以,对于T>1000时,可以直接求出LIS,剩下T-=100 ...
- Android之怎样使用ListView列表视图
ListView 列表视图创建方法: (1)直接使用ListView 组件创建 (2)让Activity继承ListActivity实现 第一种:在XML中直接使用ListView 组件创建 在val ...
- Effective C++ 45-48
45.弄清c++在幕后为你所写.所调用的函数. 假设设置一个空类,c++编译器会声明下面函数:拷贝构造函数.赋值运算符,析构函数,一对取地址运算符函数(const和非const).而假设你没有声明不论 ...
- jenkins集成钉钉
1.创建通知人群组,添加机器人 2.2.获取自定义机器人webhook 3.jenkins 安装"Dingding[钉钉] Plugin"插件: 4.插件安装完成后,创建/修改任务 ...
- Kids Store - OpenCart 自适应主题模板 ABC-0022
KIDS STORE - OPENCART 自适应主题模板 ABC-0022 FEATURES Get FREE Lifetime Updates Get FREE On-Going Support ...
- dynamic关键字的使用
https://www.newtonsoft.com/json/help/html/T_Newtonsoft_Json_JsonConvert.htm 在使用DeserializeObject函数进行 ...