本文原作者：柠檬不萌，来自原文地址

请按 效果 - 代码 - 错误思路 - 正确思路 - 知识点的顺序观看～ 

三口艾瑞八嘚～

效果

话不多说先看图吧您吶，PS只看”wechat“下方那一点～

想做小程序好久了，这周终于有时间搞一下～ 那么问题来了，好久没有写网页了，之前的老本全还回去了 
幸好～ h5还算简单。。那就上呗，好了，不废话了。。 
代码 
home.wxml

<view class="home_address">  
  <view>  
    <text>停靠在：{{formatted_address}}</text>  
    <image src="{{imgUrls_address}}" />  
  </view>  
</view>  

home.wxss

.home_address {  
  background-color: #e0004d;  
  text-align: center;  
  padding: 10rpx;  
}  
.home_address view {  
  padding-right: 30rpx;  
  padding-left: 30rpx;  
  padding-top: 10rpx;  
  padding-bottom: 10rpx;  
  white-space: nowrap;  
}  
.home_address view text {  
  color: white;  
  font-size: 14px;  
  padding-right: 40rpx;  
  padding-top: 10rpx;  
  padding-bottom: 10rpx;  
  padding-left: 20rpx;  
  white-space: nowrap;  
  border-radius: 30rpx;  
  background-color: #a00c3d;  
}  
.home_address image {  
  width: 14rpx;  
  height: 9rpx;  
  padding: 8rpx;  
  margin-left: -40rpx;  
}  

home.js

Page({  
  data: {  
    formatted_address: '朝阳大悦城',//停靠地址  
  },  

代码看完了，那么我们来看看思路 
错误思路 
错误思路1：view1背景 - view2背景 - text - image 
效果：view2背景永远都是全屏啊有木有，完全自适应啊有木有，设置view宽度不管用啊有木有， 
如果你想想不粗来，look this

错误思路1：view1背景 - view2 - text背景 - image 
好办啊，你给文字上背景不就OK了。。 
Are you kidding me?

【我刚刚想到一个思路，但是没有试呢 
酱婶儿 
文字设置左侧圆角，右侧直角，的背景 
图片设置左侧圆角，右侧直角，的背景 
有兴趣可以试试（内心OS：好low啊～。。其实我接下来的做法也挺low，捂脸。。。）】 
正确思路 
view1背景 - view2单行 - text背景单行右距离 - image负左距离 
代码参考上面代码 
bingo～ 比零比零的正确效果新鲜出炉

长度随便变～你开心就好，哈哈

tip 
text一定要用padding，image一定要用margin 
单行一定是：white-space:nowrap 
view居中：

text-align:center;
margin-left:auto; 
margin-right:auto;
or
text-align:center;
margin:0 auto;

字体w3: 
可以采用 标签 <view></view> 将text组件包裹起来，作为父标签，就可以作为新的一行 
或者采用 设置class 属性 加上 display: block;

自体换行：1 <view></view> 将text组件包裹起来 
2 设置class 属性 - display: block; 
动态字体：<text>{{text}}</text> text在js - data 
字体事件：view - bindtap ，对应的 .js 文件中写函数

<view bindtap="func">  
   <text>{{text}}</text>  
 </view>  

.js：func: function() { this.setData({ text:"更改文字"}, 
说不定需求过两天又变了，万一把我这个辛辛苦苦写的样式删掉，岂不是6月飞雪～ 
原谅我，我h5+css+js 都忘的一干二净~~ 
各位仙人各位大神，看我代码有什么毛病赶紧帮我指出来啊，或者命名规范啊，写的有什么不对的 
有多少告诉我多少，不胜感激～～～嘤嘤嘤～～

源代码下载电影天堂