Question

我已经看过其他类似的问题，但是我没有成功将他们的想法融入到我的代码中，因为它与开始时的问题完全不同。更奇怪的是，在jsFiddle中，我的代码能够居中，但是我无法将它放在同一条线上，而在我的项目中，我可以将它放在同一条线上，但不能让它居中。

由于某些原因我不明白，行元素的宽度远远大于任何元素。 100%和auto都不会从行中删除空格：

HTML：

<form method="POST" class="dropdownForms">
  <div class="row">
    <div class="col-md-3">
      <div class="form-group">
        <label for="sel1">Choose 1st option</label>
        <select class="form-control" id="sel1">
          <option>1st dropdown</option>
          <!-- more options here-->
        </select>
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group">
        <label for="sel1">Choose 2nd option</label>
        <select class="form-control" id="sel1">
          <option>2nd dropdown</option>
          <!-- more options here -->
        </select>
      </div>
    </div>
    <div class="col-md-3">
      <button class="btn btn-xs btn-default">Send</button>
    </div>
  </div>
</form>

的CSS：

.dropdownForms{
  text-align: center;
  list-style: none; 
  display: inline   
}

.row{
    width: 100%;
    height: 100%;
    text-align: center
}

.col-md-3{
    text-align: center;
    width: auto;
    padding: 0 0 0 0;
    margin: 0px 2px 0px 2px
}

.form-control {
    width: auto;
    display: inline;
    text-align: center;
}

.form-group {
    display: inline-block;
}

编辑：在使用Arashtad有限公司的更改后，它确实在jsFiddle中工作，但在我的项目中它看起来仍然很奇怪：

Answer 1

您不需要编写这么多代码。只有这两件才能让您获得您正在寻找的结果：

form {
    width: 100%;
    text-align: center;
}
.row,
.col-md-3 {
    display: inline-block;
}

请参阅jsFiddle

上的正在运行的代码

Answer 2

在Arashtad Ltd的回答之上，我将col-md-3更改为col并添加了更多col个元素来封装每个label和select。

jsFiddle

这解决了我的项目问题。

如何将表格（2个下拉菜单和按钮）放在一行中心

2 个答案: