javascript - 在同一行制作表单元素

Question

我目前正在制作一个应用程序，并且我正在尝试使 3 个表单元素对齐 (25/25/50) 不管是谁，似乎进展并不顺利。我会在最后附上一张照片来展示它现在的样子。另外，如果可能的话，我是否可以让 3 表单元素之间有一个空格，以便更容易阅读和解释？

Between
<div class="ui-grid-e">
  <div class=ui-block-a><input type="text" name="between1" id="between1" required /></div>
  <div class=ui-block-b><input type="text" name="between2" id="between2" required /></div>
  Comment
  <div class=ui-block-c><input type="text" name="betweencomment" id="betweencomment" required /></div>
</div>

https://imgur.com/a/vlpbi/

Answer 1

只需更新您的标记

.ui-grid-e {
position: relative;
width: 400px;
}

.ui-block-a,
.ui-block-b,
.ui-block-c {
box-sizing: border-box;
padding: 0 5px;
}

.ui-block-a{
padding-left: 0;
}

.title-c {
padding-left: 5px;
}

.ui-block-title{
box-sizing: border-box;
float: left;
width: 50%;
}

.ui-block-a,
.ui-block-b {
float: left;
width: 25%;
}

.ui-block-c{
float: left;
width: 50%;
}

input {
width: 100%;
}

<div class="ui-grid-e">
                     <div class="ui-block-title title-a-b">Between</div>
                     <div class="ui-block-title title-c">Comment</div>
                        <div class=ui-block-a><input type="text" name="between1" id="between1" required /></div>
                        <div class=ui-block-b><input type="text" name="between2" id="between2" required /></div>
                        
                        <div class=ui-block-c><input type="text" name="betweencomment" id="betweencomment" required /></div>
                    </div>