底部右側絕對定位問題

Question

我想在div容器的右下角放置一個複選框。容器在懸停時會長高，我希望複選框變得粘稠，以便在div增長時保持在右下角。

我有一些真正的麻煩讓複選框在右下角。我的代碼是Fiddle。

<div class="objectWrap"> 
    <div class="calendarObject"> 
     <label class="objectTitle" for="chkOb2">Tasks</span> 
     <input type="checkbox" id="chkOb2" /> 
    </div> 
</div> 

---

.objectWrap { 
    position:relative; 
    float:left; 
    height:75px; 
    margin-bottom:15px; 
} 
    .objectWrap:not(:last-child) { 
     margin-right:15px; 
    } 
    .objectWrap:hover { 
     cursor:pointer; 
    } 

.calendarObject { 
    position:relative; 
    width:72px; 
    height:75%; 
    background-color:#f5f5f5; 
    border-radius:5px; 

    transition: height 400ms; 
    -webkit-transition: height 400ms; 
} 
    .calendarObject label.objectTitle { 
     position:absolute; 
     top:3px; 
     left:3px; 

     font-size:13px; 
     color: #8998a4; 
    } 
    .calendarObject input[type="checkbox"] { 
     position:absolute; 
     bottom:0px; 
     right:0px; 
    } 
    .calendarObject:hover { 
     height:100%; 
     transition: height 400ms; 
     -webkit-transition: height 400ms; 
    } 

Answer 1

你在你的代碼中的錯誤。 </span>應該是</label>。

更正HTML：

<div class="objectWrap"> 
    <div class="calendarObject"> 
     <label class="objectTitle" for="chkOb2">Tasks</label> 
     <input type="checkbox" id="chkOb2" /> 
    </div> 
</div>​ 

Corrected JS Fiddle

Answer 2

您的標記不正確嵌套..您的標籤標記需要關閉標籤標記..不關閉span標記。