HTML和CSS水平调整

我正在网页中构建一个聊天功能，我在设计提交字段时遇到了麻烦。我会为您提供一张我的目标图片，以及目前格式的代码。HTML和CSS水平调整

这里是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; 
}

我知道使用的一切类可能不是最优的，但还有什么我做错了正确的现在？提示我需要更改以获得新的外观？

来源

2017-04-20 Hangfish

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

来源

2017-04-20 12:50:01

我需要做的比留下50px的多一点;和右：50px;但你让我走上正轨，谢谢！ – Hangfish

我知道我不想计算它我只是想帮你:) –

尝试

.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; 
}

来源

2017-04-20 13:18:29

HTML和CSS水平调整

回答

相关问题