justify-content对view下<input><button>不起作用
发布于 5 年前 作者 juanyin 17935 次浏览 来自 问答

在<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 回复

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

 margin0rpx;

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

回到顶部