Question

我在CodePen中构建一个虚拟表单，在中间行我想要两个输入框彼此相邻，每行占50％。我能够做到这一点，但是，我无法在输入框内单击以开始输入。我可以开始输入每个输入的唯一方法是从第一个框开始，然后按“＆＃39;”选项卡。有什么建议吗？

HTML：

<div class="wrapper">
  <h1>Application for Philadelphia Eagles</h1>
  <h2><strong>Position:</strong> Wide Receiver</h2>
  <p>An attempt at Input label floats</p>
  <form class="form-container">
    <div class="form-tr">
      <div class="tc-100"><input type="text"></div>
    </div>
    <div class="form-tr">
      <div class="tc-50 flt-l"><input type="text"></div>
      <div class="tc-50 flt-r"><input type="text"></div>
    </div>
    <div class="form-tr">
      <div class="tc-100"><input type="text"></div>
    </div>
  </form>
</div>

CSS：

@import url('https://fonts.googleapis.com/css?family=Josefin+Slab:400,300,700');

body {
  font-family: Josefin Slab, sans-serif;
}
h1, h2 {margin: 0.465em}
.wrapper {
  margin: 0 auto;
  text-align: center;
  width: 75%;
}
.flt-l { float:left; }
.flt-r { float:right; }
.form-container {
  position:relative;
  border: 1px solid #000;
  width:40em;
  margin: 0 auto;
}
.form-tr {
  display: block;
  position:relative;
  margin-bottom: 0px;
  width:100%;
}
.tc-50  {
  width:50%;
}
input[type=text] {
  width: 100%;
}
input[type=text] {
  font-size:1em;
  padding:1em;
  box-sizing: border-box;
}

我的CodePen：http://codepen.io/mjdeangelis/pen/avpBex?editors=110

Answer 1

另一个修复方法是从CSS文件中的form-tr中删除position：relative属性，因为外部表单容器已经拥有它，在这种情况下，它使中间的2个输入重叠。

在：

.form-tr {
  display: block;
  position:relative;
  margin-bottom: 0px;
  width:100%;
}

后：

.form-tr {
  display: block;
  margin-bottom: 0px;
  width:100%;
}

如需额外参考，您可以随时查看以下链接：

http://www.w3schools.com/cssref/playit.asp?filename=playcss_position
http://www.w3schools.com/cssref/pr_class_position.asp

Answer 2

更改您的课程，如：

.flt-l {
  float:left;
}

.flt-r {
  display: inline-block;
}

Answer 3

第三行与第二行重叠，因此无法点击。为第二行提供一个高度，以便将第三行推到它下面。

此处提供了更新的代码

http://codepen.io/anon/pen/rOjjYE?editors=110

.split-row{
  height:50px;
}

Answer 4

设置form-tr高度以匹配全角行的高度。

.form-tr {
    display: block;
    position: relative;
    margin-bottom: 0px;
    width: 100%;
    height: 55px;
}

Answer 5

如果你可以删除＆＃34; position：relative＆＃34;在课堂上，它也有效。

.form-tr {
  display: block;
  margin-bottom: 0px;
  width:100%;
}

为什么我不能在这些输入框中选择？

5 个答案: