如何使一行的输入与下一行的输入垂直在同一行？

时间：2019-06-25 18:32:17

标签： html css twitter-bootstrap input

我正在制作会员注册表格，我想在同一行与下一行的输入垂直放置或设置一行的输入。我做了一个display：flex div并把我希望它们内联的输入放入其中，但是我不能将它们与下一行的输入垂直设置在同一行。

我正试图像这样 https://i.ibb.co/SscFZvw/reg.png 

<link rel="stylesheet" href="https://dl.dropbox.com/s/67bh94g7thmfl8h/bootstrap.css" />
<link href="https://dl.dropbox.com/s/dfc2odz62i3h6zx/style.css" rel="stylesheet" type="text/css" />
<link href="https://dl.dropbox.com/s/8b5z3fkk887injx/megamenu.css" rel="stylesheet" type="text/css" media="all" />

<div class="container">
  <div class="row">
    <div class="col-md-12 col-md-offset-1" style="margin: 0 auto;width:100%">
      <div class="panel panel-default">
        <div class="panel-heading">Member Registration</div>
        <br>
        <form class="form-horizontal" method="POST" action="/member_reg" enctype="multipart/form-data">

          <div style="display:flex;">
            <div class="form-group{{ $errors->has('membership_date') ? ' has-error' : '' }}">
              <label class="col-md-6 control-label">Membership Date</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="membership_date" value="{{ old('membership_date') }}" required="required">
              </div>
            </div>

            <div class="form-group{{ $errors->has('membership_no.') ? ' has-error' : '' }}">
              <label class="col-md-6 control-label">Membership No.</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="membership_no." value="{{ old('membership_no.') }}" required="required">
              </div>
            </div>
          </div>

          <div style="display:flex;">
            <div class="form-group{{ $errors->has('member_name') ? ' has-error' : '' }}">
              <label class="col-md-6 control-label">Member Name</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="member_name" value="{{ old('member_name') }}" required="required">
              </div>
            </div>

            <div class="form-group{{ $errors->has('father_name') ? ' has-error' : '' }}">
              <label class="col-md-6 control-label">Father Name</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="father_name" value="{{ old('father_name') }}" required="required">
              </div>
            </div>

            <div class="form-group{{ $errors->has('mother_name') ? ' has-error' : '' }}">
              <label class="col-md-6 control-label">Mother Name</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="mother_name" value="{{ old('mother_name') }}" required="required">
              </div>
            </div>
          </div>

          <div style="display:flex;">
            <div class="form-group{{ $errors->has('birth_date') ? ' has-error' : '' }}">
              <label class="col-md-6 control-label">Birth Date</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="birth_date" value="{{ old('birth_date') }}" required="required">
              </div>
            </div>

            <div class="form-group{{ $errors->has('birth_place') ? ' has-error' : '' }}">
              <label class="col-md-6 control-label">Birth Place</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="birth_place" value="{{ old('birth_place') }}" required="required">
              </div>
            </div>

            <div class="form-group{{ $errors->has('gender') ? ' has-error' : '' }}">
              <label class="col-md-6 control-label">Gender</label>
              <div class="col-md-6">
                <input type="text" class="form-control" name="gender" value="{{ old('gender') }}" required="required">
              </div>
            </div>
          </div>

        </form>
      </div>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：0)

如果您不需要支持IE11（这仍然可以在IE10 +中使用网格，但这只是更多工作），这是CSS网格的一个很好的用例。参见下文，如果您删除flex容器，然后将表单变成3列网格容器，它将按预期工作（请参见主体末尾的样式标签）。请注意，我添加了一个空的占位符div以在第一行中创建该空白。

.form-horizontal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px
}
<head>
  <html>
    <link rel="stylesheet" href="https://dl.dropbox.com/s/67bh94g7thmfl8h/bootstrap.css" />
    <link href="https://dl.dropbox.com/s/dfc2odz62i3h6zx/style.css" rel="stylesheet" type="text/css" />
    <link href="https://dl.dropbox.com/s/8b5z3fkk887injx/megamenu.css" rel="stylesheet" type="text/css" media="all" />
  </head>
</html>
<body>     
  <div class="container">
    <div class="row">
      <div class="col-md-12 col-md-offset-1" style="margin: 0 auto;width:100%">
        <div class="panel panel-default">
          <div class="panel-heading">Member Registration</div>
          <br>
          <form class="form-horizontal" method="POST" action="/member_reg" enctype="multipart/form-data">
  
            <!-- <div style="display:flex;"> -->
              <div class="form-group{{ $errors->has('membership_date') ? ' has-error' : '' }}">
                <label class="col-md-6 control-label">Membership Date</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="membership_date" value="{{ old('membership_date') }}" required="required">
                </div>
              </div>
  
              <div class="form-group{{ $errors->has('membership_no.') ? ' has-error' : '' }}">
                <label class="col-md-6 control-label">Membership No.</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="membership_no." value="{{ old('membership_no.') }}" required="required">
                </div>
              </div>
              <!-- ADD EMPTY DIV PLACEHOLDER -->
              <div class="placeholder_item"></div>
            <!-- </div> -->
  
            <!-- <div style="display:flex;"> -->
              <div class="form-group{{ $errors->has('member_name') ? ' has-error' : '' }}">
                <label class="col-md-6 control-label">Member Name</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="member_name" value="{{ old('member_name') }}" required="required">
                </div>
              </div>
  
              <div class="form-group{{ $errors->has('father_name') ? ' has-error' : '' }}">
                <label class="col-md-6 control-label">Father Name</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="father_name" value="{{ old('father_name') }}" required="required">
                </div>
              </div>
  
              <div class="form-group{{ $errors->has('mother_name') ? ' has-error' : '' }}">
                <label class="col-md-6 control-label">Mother Name</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="mother_name" value="{{ old('mother_name') }}" required="required">
                </div>
              </div>
            <!-- </div> -->
  
            <!-- <div style="display:flex;"> -->
              <div class="form-group{{ $errors->has('birth_date') ? ' has-error' : '' }}">
                <label class="col-md-6 control-label">Birth Date</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="birth_date" value="{{ old('birth_date') }}" required="required">
                </div>
              </div>
  
              <div class="form-group{{ $errors->has('birth_place') ? ' has-error' : '' }}">
                <label class="col-md-6 control-label">Birth Place</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="birth_place" value="{{ old('birth_place') }}" required="required">
                </div>
              </div>
  
              <div class="form-group{{ $errors->has('gender') ? ' has-error' : '' }}">
                <label class="col-md-6 control-label">Gender</label>
                <div class="col-md-6">
                  <input type="text" class="form-control" name="gender" value="{{ old('gender') }}" required="required">
                </div>
              </div>
            <!-- </div> -->
  
          </form>
        </div>
      </div>
    </div>
  </div>

相关问题
最新问题