Якорные теги - одинаковой высоты, все еще кликабельны с CSS?

Question

У меня есть небольшой код на jsfiddle: http://jsfiddle.net/tYrCe/1/ Отредактируйте его, если хотите!

У меня есть 3 кнопки с тегами привязки. Я бы хотел, чтобы они были равны по высоте.

Требования

• Равный по высоте
• Независимо от содержимого (min-height, not ok)
• Вся ссылка по-прежнему должна быть интерактивной (javascript onclick, not ok)

Answer 1

Вы можете использовать display: table-cell.

table-layout: fixed равномерно распределяет доступную ширину между ячейками.

Убедитесь, что поддержка браузера приемлема для вас: http://caniuse.com/css-table
(я полагаю, что поддержка IE6 / 7 не подходит, потому что вы используете outline)

См .: http://jsfiddle.net/thirtydot/Ab6bg/

.urls {
    width: 300px;
    background: #fff;
    display: table;
    table-layout: fixed
}
.urls a {
    display: table-cell;
    outline: 1px solid #ccc
}

Answer 2

Классический, чистый способ CSS заключается в использовании большого нижнего отступа, а затем обратного поля, как описано в этой статье «Положение - все» .

Вот ваша скрипка, измененная соответственно .

HTML:

<div class="urls">
    <a href="#">A little content</a>
    <a href="#">A little more content with more text</a>
    <a href="#">A little very much more content with very much more text</a>
</div>

CSS:

.urls {
    width: 300px;
    overflow-y: hidden;
}
.urls a {
    display: inline-block;
    float: left;
    padding-bottom: 30em;
    margin: 0 0 -29em;
    width: 33.33%;
}