justify-content对view下<input><button>不起作用 - WXOPEN Club

在<view>里设置了justify-content:space-around对<view>下面的<input><button>不起作用

<view class="post-input-container">

<input type="text" placeholder="输入内容" class="post-input"/>

<button class="post-send-btn">发送</button>

</view>

.post-input-container {

position:fixed;

bottom:0;

width: 100%;

height: 100rpx;

display: flex;

flex-direction: row;

justify-content: space-around;

align-items: center;

background-color:chartreuse;

}

.post-input-container .post-input {

width:50%;

height: 80rpx;

background-color:beige;

}

.post-input-container .post-send-btn {

width:30%;

height:80rpx;

background-color: bisque;

}

3 回复

wliang1 楼6 年前

button组件里自带了margin-left和margin-right导致的这种情况，你可以在button样式里加上margin:0;就好了

taoyong2 楼6 年前

margin: 0rpx;

yandai3 楼5 年前

建议代码修改，将input和button用view标签包裹，去掉input和button的宽度限制