Question

我有一个用CSS作为表格样式的表单。然而，两个输入元件显示为彼此叠置而不是并排放置。我怎样才能让他们并肩？

如评论中所述，这可能与浏览器有关。我在Windows 10上的IE 11.0.14393.0上运行它。

＆＃13;

div,
a {
    font-family: Segoe, "Segoe UI", sans-serif
}

.FormContainer form {
	display: table;
}
.FormContainer form div {
	display: table-row;
}
.FormContainer form div label,
.FormContainer form div input {
	display: table-cell;
	margin: 5px 0px;
}
.FormContainer form div label {
	vertical-align: middle;
	padding-right: 10px;
}
.FormContainer form div input[type=text] {
	min-width: 200px;
}

＆＃13;

<body>
    <div>
      <p><font size="6"><u><strong>Search Users</strong></u></font></p>
	  <p>Search for...</p>
    </div>
    <div class="FormContainer">
      <form action="SearchNewestUsers.php" method="post">
        <div>
          <label for="UserCount">Newest users</label>
          <input type="text" name="UserCount" id="UserCount" placeholder="Enter number of users...">
          <input type="submit" name="SearchButton" id="SearchButton" value="Search">
        </div>
      </form>
    </div>
</body>

＆＃13;

上面的代码段为我生成以下输出：

Answer 1

所以错误在于IE，它似乎并不像你拥有的display: table-cell。我发现的解决方案是将两个输入更改为inline-block。

＆＃13;

div,
a {
  font-family: Segoe, "Segoe UI", sans-serif
}
.FormContainer form {
  display: table;
}
.FormContainer form div {
  display: table-row;
}
.FormContainer form div label,
.FormContainer form div input {
  display: table-cell;
  margin: 5px 0px;
}

.FormContainer form div input {
  display: inline-block!important;
  margin: 5px 0px;
}
.FormContainer form div label {
  vertical-align: middle;
  padding-right: 10px;
}
.FormContainer form div input[type=text] {
  min-width: 200px;
}

＆＃13;

<body>
  <div>
    <p><font size="6"><u><strong>Search Users</strong></u></font>
    </p>
    <p>Search for...</p>
  </div>
  <div class="FormContainer">
    <form action="SearchNewestUsers.php" method="post">
      <div>
        <label for="UserCount">Newest users</label>
        <input type="text" name="UserCount" id="UserCount" placeholder="Enter number of users...">
        <input type="submit" name="SearchButton" id="SearchButton" value="Search">
      </div>
    </form>
  </div>
</body>

＆＃13;

CSS表将单元格组合到IE 11中的同一列中

1 个答案: