今天碰见个感觉很奇怪的问题修改了button的很多样式就是得不到自己想要的效果
比如 我想他能够跟普通text一样显示文字,但是button有自己的border自己的背景并且默认还是文字居中显示,调了半天都没有试出来,最重要的是在小程序官方文档的组件中也没有提供button的默认css样式,从显示上能断定是使用了文字居中、border边框等,所以很难去通过尝试修改而达到目的
这里提供一下button默认的css样式,只有知道了button的默认样式才能知道修改哪个属性达到想要的效果
button {
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
padding-left:14px;
padding-right:14px;
box-sizing:border-box;
font-size:18px;
text-align:center;
text-decoration:none;
line-height:2.55555556;
border-radius:5px;
-webkit-tap-highlight-color:transparent;
overflow:hidden;
color:#000000;
background-color:#F8F8F8;
}
通过上面的css样式就能够轻松的解决button布局问题,
例如:
1、文字在button内居中问题
我们设置 text-align: left; 然后设置padding-left:0px; 这样文字就会在左边显示
2、默认 边框border问题
我们可以使用:
button::after {
border: none;
}
因为button的边框样式是通过::after
方式实现的,如果在button上定义边框就会出现两条边框线,所以我们可以使用::after
的方式去覆盖默认值。
还需要去掉圆角以及修改背景颜色
background-color: #fff;
border-radius: 0;