<li> не займет 100% высоты родительского <ul>

У меня есть <ul> с несколькими <li> элементами всего в одной строке. <li> имеет вложенные <span> и <img>. Высота <img> одинакова для всех элементов. Но элементы <span> содержат текст, который может охватывать одну строку или две строки (в зависимости от текста).

Я пробовал appying display:block, float:left, height:100% и несколько других предложений, которые я нашел, но более короткие элементы <li> не будут иметь ту же высоту, что и более высокие элементы <li>. Таким образом, я оставляю место ниже более коротких элементов <li>. У кого-нибудь есть предложения по этому поводу?

Ответ 1

В этом случае, когда вы устанавливаете высоту: 100%, она не наследует никакой высоты от ее родителя. Если вы хотите, чтобы элементы списка имели 100% высоту div #wrapper, вы должны установить высоту ul на 100% и установить высоту на div #wrapper в пикселях или em:

http://jsfiddle.net/SF9Za/1/

#wrapper {
    background: transparent;
    width: 350px;
    color: white;
    height:250px;
}
#wrapper ul {
    list-style-type: none;
    display: block;
    float: left;
    background: green;
    height:100%;
}

Если вы предпочли бы, чтобы он растянулся до полной высоты окна браузера, вам нужно установить высоту html, body в вашем css на 100%, а затем все элементы до li (html, body, div # wrapper, ul.list и li) должны иметь высоту 100%:

http://jsfiddle.net/YdGra/

html, body{
    height:100%;
    margin:0;
    padding:0;
}
#wrapper {
    background: transparent;
    width: 350px;
    color: white;
    height:100%;
}
#wrapper ul {
    list-style-type: none;
    display: block;
    float: left;
    background: green;
    height:100%;
}

Вот некоторые другие ссылки, которые вы можете проверить, чтобы поговорить об этом:

Ответ 2

Легкое исправление заключается в добавлении display:table к вашему элементу ul. Элемент будет согласован с содержимым.

Ответ 3

может быть, он исправит, если вы измените list-style-position контейнера ul