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

我建议使用html如下：

<form class="ui-grid-e">
       <input type="text" name="between1" id="between1"  />
       <input type="text" name="between2" id="between2"  />
       <input type="text" name="betweencomment" id="betweencomment"/>
</form>

并在你的CSS中：

.ui-grid-e{ 

display: inline;

float: left;


}

Answer 2

只需更新您的标记

{{1}}

{{1}}

Answer 3

只需使用这样的flex：

.ui-grid-e {
  display: flex;
}

.ui-block-a,
.ui-block-c {
  flex: 1;
  margin: 0 5px;
}

.ui-block-a input {
  width: 48%;
}

.ui-block-c input {
  width: 100%;
}

div {
  box-sizing: border-box;
}

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

使表单元素在同一行上

3 个答案: