Question

我无法弄清楚为什么当P元素出现时，li的高度没有增加..我尝试了各种各样的位置和溢出元素，但是没有看到它。。谁能帮我吗？提前谢谢！

有关更多代码，请参阅此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;
}

Answer 1

问题是position: absolute;和p元素的input。

它们离开了自然页面流，因此height元素的li不会增加......

Answer 2

您使用过：

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

另外（从中删除p）：

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

Example：

Answer 3

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

应该解决你的问题。

为什么我的LI标签没有随着它的儿童P标签而增长？

3 个答案: