Question

我想让我的表单字段显示在一行中。这是我的表单的HTML：

<form>
  <div class="form-group">
    <ul class="hypers">
      <li><input type="email" class="form-control emailfield" id="exampleInputEmail1" placeholder="ENTER YOUR EMAIL"></li>
      <li><input type="email" class="form-control zipfield" id="exampleInputEmail1" placeholder="ZIP CODE"></li>
    </ul>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

我可以添加ul元素，并将每个字段放在li标记中，然后将此代码添加到css中：

.hypers li{
  display: inline;
}

但问题是它以这种方式显示表单而不是一行：

那么我该如何解决这个问题呢？

Answer 1

1）一行只有lis

.hypers li {
    width: 50%;
    float: left;
}

＆＃13;

.hypers li {
    width:50%;
    float: left;
}

.btn {
    margin-left:40px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form>
    <div class="form-group">
        <ul class="hypers">
            <li><input type="email" class="form-control emailfield" id="exampleInputEmail1" placeholder="ENTER YOUR EMAIL"></li>
            <li><input type="email" class="form-control zipfield" id="exampleInputEmail1" placeholder="ZIP CODE"></li>
        </ul>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

＆＃13;

2）全部在一行

.hypers li {
    width: 40%;
    float: left;
}

＆＃13;

.hypers li {
    width: 40%;
    float: left;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form>
    <div class="form-group">
        <ul class="hypers">
            <li><input type="email" class="form-control emailfield" id="exampleInputEmail1" placeholder="ENTER YOUR EMAIL"></li>
            <li><input type="email" class="form-control zipfield" id="exampleInputEmail1" placeholder="ZIP CODE"></li>
        </ul>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

＆＃13;

Answer 2

在HTML中添加一些CSS类：

<form>
  <div class="form-group like-table">
    <ul class="hypers like-table-row">
      <li class="like-table-cell"><input type="email" class="form-control emailfield" id="exampleInputEmail1" placeholder="ENTER YOUR EMAIL"></li>
      <li class="like-table-cell"><input type="email" class="form-control zipfield" id="exampleInputEmail1" placeholder="ZIP CODE"></li>
    </ul>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

并使用以下CSS：

.like-table { display: table }
.like-table-row { display: table-row }
.like-table-cell { display: table-cell }

您也可以在此jsFiddle

中查看相同内容

Answer 3

您可以使用.d-inline-block类轻松实现这一目标li元素

<li class="d-inline-block">
    <input type="email" class=" form-control emailfield" id="exampleInputEmail1" placeholder="ENTER YOUR EMAIL">
</li>

Bootstrap将负责其余的对齐。

以下是完整代码JSFiddle

如何内联显示表单域

3 个答案: