HTML和CSS水平调整

Question

我正在网页中构建聊天功能，而我在设计提交字段方面遇到了麻烦。我将向您提供我的目标图片，以及目前格式化的代码。

这是HTML代码：

<div class="submitField">
    <textarea   class="submitArea" form="usrform"> </textarea>
    <form action="" id="usrform">
    <input type="submit" class="submitBtn">
    </form>
  </div>

CSS代码：

.submitField {
    position: fixed;
    bottom: auto;
    width: 100%;
    padding: 10px;
    background-color: red;
        display: inline-block;
}



.submitArea {
    width: 50vh;
    height: 8vh;
    padding: 5px 5px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
    color: black;
        position: relative;
}

.submitBtn {
    color: black;
}

我知道在所有事情上使用课程可能不是最优的，但是我现在还在做什么呢？关于我需要更改以获得新外观的提示？

Answer 1

给按钮position:absolute;，然后给它一个left: 50px;和right: 50px;

Answer 2

尝试

.submitField {
    position: fixed;
    bottom: auto;
    width: 100%;
    padding: 10px;
    background-color: red;
    display: flex;
}



#usrform {
    width: 15%;
    display: inline-block;
    align-self: center;
}



.submitBtn {
    color: black;
    display: block;
    margin: 0 auto;
}