HTML和CSS水平调整(HTML and CSS horizontal adjustment)

我正在网页中构建聊天功能，我在设计提交字段时遇到了麻烦。 我将为您提供我的目标和当前代码的图片 格式化它们。

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

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

I am building a chat functionality in a web page and I'm having trouble with the design of the submit field I have in mind. I will provide you with a picture of my goal, and the code that currently formats them.

And here is the HTML code:

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

And the CSS code:

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

I know using classes on everything might be less than optimal, but what else am I doing wrong right now? Tips on what I need to change to get the New look?

最满意答案

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

give the button a position:absolute; and then give it a left: 50px; and a right: 50px;

更多推荐