Установка высоты в CSS для неупорядоченного списка?

#css

Вопрос:

У меня здесь есть список для нижнего колонтитула моей страницы, который я хочу отображать горизонтально.

Но поскольку я превратил его во встроенный список с горизонтальным расположением, фоновые изображения обрезаются по вертикали. Самый большой из них имеет высоту 27 пикселей.

Итак, я застрял.. Я знаю, почему следующее делает то, что оно делает. Но как мне обойти это?

Вот html:

 <div id="footer">
    <ul>
        <li id="footer-tmdb"><a href="">Film data courtesy of TMDB</a></li>
        <li id="footer-email"><a href="">Contact Us</a></li>
        <li id="footer-twitter"><a href="">Follow Us</a></li>
    </ul>
</div>

и CSS:

 #footer ul {
    height: 27px;
}

#footer ul li {
    display: inline;
    list-style: none;
    margin-right: 20px;
}

#footer-tmdb {
    background: url('../images/logo-tmdb.png') no-repeat 0 0;
    padding-left: 140px;
}

#footer-email {
    background: url('../images/icon-email.png') no-repeat 0 3px;
    padding-left: 40px;
}

#footer-twitter {
    background: url('../images/icon-twitter.png') no-repeat 0 0;
    padding-left: 49px;
}

Вот как это выглядит:
нижний колонтитул

Как вы можете видеть, половина изображений обрезана.

Чем проще решение, тем лучше, пожалуйста.

Ответ №1:

 #footer ul li {
    display: block;
    float: left;
    height: 27px;
    list-style: none;
    margin-right: 20px;
}

Ответ №2:

Использовать inline-block

 #footer li {
  height: 27px;
  display: inline-block;
}

1. Это хорошее решение, но не будет работать в IE7, если это важно. ( quirksmode.org/css/display.html )

2. Да, я пытался избежать этого, если мог, к сожалению

3. Вы всегда можете использовать IE7.js чтобы убрать боль 🙂

Ответ №3:

Попробуйте это:

 #footer ul {
    overflow: auto
}

#footer ul li {
    display: block;
    list-style: none;
    margin-right: 20px;
    float: left;
}

Ответ №4:

Попробуйте это:

 #footer li,
#footer ul {
    height: 27px;
}