Question

我仍在努力争取我的名单......

在一些帮助下，我设法得到一个水平列表（对于我的情况）完美尺寸：33.33％宽度和基于最高元素的相同高度。我将常规列表项与table和table-cell属性结合起来。

但是，现在我只需要在<li> - 标记中包含每个<a> - 元素的内容，以使整个<li>成为一个链接。这比我想象的要困难，因为链接不会根据最高的元素填充整个<li>元素。

最好的是，如果你看一下小提琴：http://jsfiddle.net/paelzersebbi/mJm6p/4/

红色部分需要扩展到每个<li> - 元素的底部。我不能使用固定的高度或宽度，因为它需要响应。我还需要<div class="one"> - 容器，因为它应该有背景图像。

HTML

<ul>
    <li><a href="">
        <div class="one">
            <div class="caption"><h4>Caption 1</h4></div>
        </div>
        <div class="two">
            Here is some text.
        </div>
        </a>

    </li>
    <li><a href="">
        <div class="one">
            <div class="caption"><h4>Caption 2</h4></div>
        </div>
        <div class="two">
            Here is some text.<br />
            But there is more.
        </div>
        </a>

    </li>
    <li><a href="">
        <div class="one">
            <div class="caption"><h4>Caption 3</h4></div>
        </div>
        <div class="two">
            Here is some text.<br />
            But there is more.<br />
            And even more.
        </div>
        </a>
    </li>
</ul>

CSS

ul {
    list-style: none;
    display: table;
    border-collapse: separate;
    border-spacing: 30px 0;
    width: calc(80% + 60px);
    margin: 0 -30px;
    padding: 0;
}
li {
    display: table-cell;
    width: 33.33333%;
    background-color: #FFF;
    vertical-align: top;
    padding: 10px;
    position: relative;
}
a {
    display: block;
    background: red;
}
a:hover {
    background: #CCC;
}
.one {
    height: 100px;
    background-color: #C92;
    position: relative;
}
.caption {
    position: absolute;
    bottom: 0;
}
h4 {
    margin:0;
    padding:5px;
}
.two {
    padding:5px;
}

感谢您的帮助，我真的很感激！

Answer 1

您可以在<a>上使用伪元素来增加其通过点击/悬停可以到达的区域。的 DEMO

更新您的CSS。

a { display: block; background: red;/* demo purpose */ position:relative;/* needed for absolute pseudo */ } li { overflow:hidden;/* hide pseudo overflowing */ } a:after { content:''; position:absolute; width:100%; height:400px;/* whatever you think will be high enough */ background:inherit;/* demo purpose */ }

其他选项是使用此结构： DEMO

<nav> <a> tags </a> <a> tags </a> <a> tags </a> </nav>

列表元素的内容全高度CSS

1 个答案: