在CSS中的特定位置对齐当前行的输入

Question

我正在尝试在HTML / CSS中创建设置页面。我有一个圆角div，里面有一些文字和一个输入框。

我想将下图中的输入框与红线对齐。在CSS中是否有一种方法可以将输入框推到一起并让它们在每个div中排成一行？

CSS

.mainItem {
    background-color: white;
    color: #38434e;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid #d6d9e5;
}
.pageInput {
    position: absolute:
    left: 200px;
}

HTML

<div class="mainItem">Business Name<input type="text" class="pageInput"></div>
<div class="mainItem">Address<input type="text" class="pageInput"></div>

Bhuwan的解决方案不起作用，看起来像这样：

Answer 1

我会把你的文字放在一个标签上并给它一个宽度：

＆＃13;

＆＃13;

<script>
$(document).ready(function(){

$("#title0").change(function (){
          if($(this).val() === "0"){
            $('#save').prop('disabled', true);
          }else{
            $('#save').prop('disabled', false);
          }
        });

$("#title1").change(function (){
          if($(this).val() === "0"){
            $('#save').prop('disabled', true);
          }else{
            $('#save').prop('disabled', false);
          }
        });
});

＆＃13;

.mainItem {
  background-color: white;
  color: #38434e;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  border: 1px solid #d6d9e5;
}

.mainItem>label {
  display: inline-block;
  width: 150px;
}

＆＃13;

＆＃13;

＆＃13;

标签使您的表单更易于访问，因为您现在可以单击标签以集中输入

Answer 2

首先，你不需要绝对的位置。其次，为输入字段使用标签并赋予它们相同的宽度：

<div class="mainItem">
  <label for="input1">Name </label> 
  <input type="text" class="pageInput" id="input1">
</div>
<div class="mainItem">
  <label for="input2">Address</label> 
  <input type="text" class="pageInput" id="input2">
</div>

在CSS中：

.mainItem label {
  width: 20%;
  display: inline-block;
}