爲什麼我的LI標籤沒有隨着孩子的P標籤而增長？

我無法弄清楚爲什麼li的高度不會隨着P元素的增加而增加..我嘗試了各種元素的位置和溢出，但只是看不到它..任何人都可以幫我解決問題嗎？提前致謝！爲什麼我的LI標籤沒有隨着孩子的P標籤而增長？

更多的代碼裏發現fiddle

HTML：

<div class='todo_list'> 
     <div class='add_list'>&#43; List</div><br> 
     <h3 contenteditable='true'>New List<span class='remove_list' contenteditable='false'></span></h3> 
     <ul> 
      <li> 
       <input type='checkbox' class='task_status'> 
       <p class='task' contenteditable='true'></p> 
       <span class='drag'></span> 
      </li> 
     </ul> 
     <div class='add_task'>&#43;</div><br> 
    </div>

CSS：

*{ 
    margin: 0; 
    padding: 0; 
} 

body{ 
    font-family: Tahoma, sans-serif; 
} 

div.todo_list{ 
    max-width: 700px; 
    margin: 0 auto; 
} 

ul li{ 
    overflow: hidden; 
    border: 1px; 
    border-style: solid; 
    border-color: #ccc; 
    border-top: none; 
    position: relative; 
    -webkit-transition: opacity .3s; 
    -moz-transition: opacity .3s; 
    transition: opacity .3s; 
} 


p, 
input[type=checkbox]{ 
    position: absolute; 
    height: auto; 
} 


p{ 
    top: 0; 
    right: 40px; 
    left: 38px; 
    padding: 12px; 
    border-left: 1px solid #ccc; 
}

來源

2014-04-14 Pepijn Gieles

您已經使用：

ul li{ 
    overflow: hidden; // <-- this is the problem I guess 
    ... 
}

而且（刪除p來回米此）：

p, input[type=checkbox] { 
    position: absolute; // <-- this is a problem 
    height: auto; 
}

Example：

來源

2014-04-14 09:55:59

當我刪除它時，p是可見的，但li沒有在高度上增長.. –

現在你的'p'是空的，當你把一些數據放在裏面時會發生什麼？ –

@PepijnGieles您正在使用'p， input [type = checkbox] { position：absolute; 身高：自動; }'那你期望什麼？ –

問題是position: absolute;爲p和input元件。

他們走出去的天然頁面流，因此li元素不會增加的height的...

來源

2014-04-14 10:00:27 Homungus

p, 
input[type=checkbox]{ 
    position: relative; 
    height: auto; 
}

應該解決您的問題。

來源

2014-04-14 10:02:05 kabanoid

爲什麼我的LI標籤沒有隨着孩子的P標籤而增長？

回答

相關問題