爲什麼我不能在這些輸入框中選擇？

Question

我在CodePen中構建了一個虛擬表單，在中間一排中，我希望有兩個相鄰的輸入框，每行佔50％。我能夠做到這一點，但是，我無法點擊任何一個輸入框內開始輸入。我可以開始輸入每個輸入的唯一方法是從第一個框開始，然後按「選項卡」。有什麼建議麼？

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文件的形式-TR相對屬性由於外形式容器已有它並且在這種情況下，其使得在中間重疊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

第三排與第二重疊RO w，因此不可點擊。爲第二行提供一個高度，以便將第三行壓入其下方。

更新後的代碼可以在這裏找到

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

.split-row{ 
    height:50px; 
} 

Answer 4

套裝形式-TR高度來匹配您的全寬行的高度。

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

Answer 5

如果你能刪除 「的立場：相對」在課堂上，它也有效。

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