Почему мой тег LI не растет вместе с дочерним тегом P?

Question

Почему мой тег LI не растет вместе с дочерним тегом P?

0

Я не могу понять, почему высота li не увеличивается, когда элемент P делает. Я пробовал все виды позиции и переполнения элементов, но просто не вижу этого. Может ли кто-нибудь помочь мне? Заранее спасибо!

Для получения дополнительной информации см. Эту скрипку

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;
}

Pepijn Gieles 14 апр. 2014, в 12:33

Источник

Теги:

html

css

height

3 ответа

Ещё вопросы

Homungus · Answer 1 · 2014-04-14T07-36-00.000Z

Задача - это position: absolute; для p и input элементов.

Они выходят из естественного потока страниц, поэтому height элемента li не увеличивается...

kabanoid · Answer 2 · 2014-04-14T08-22-00.000Z

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

должен исправить вашу проблему.

The Alpha · Answer 3 · 2014-04-14T07-22-00.000Z

Вы использовали:

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

Также (удалите p из этого):

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

Пример:

Когда я удаляю это, p виден, но li не растет в высоту ..
Прямо сейчас ваш p пуст, что происходит, когда вы помещаете в него некоторые данные?
@PepijnGieles Вы используете p, input[type=checkbox]{ position: absolute; height: auto; } так что вы ожидаете?