仅单击块元素的文本答案

【问题标题】：Clicking on just the text of block elements仅单击块元素的文本
【发布时间】：2014-02-23 00:50:35
【问题描述】：

我有一个固定大小的div，我使用flexbox 布局在其中定位了几个内联a。我的问题是，我还需要响应在锚文本之外的div 的点击，但flexbox 将它们的显示强制为block，因此它们占用了所有可用空间，没有为用户点击后台div。

HTML：

<div class="poem">
    <a class="title">Title</a>
    <a>1919</a>
    <a>Lead</a>
    <a>Bachus</a>
</div>

已编译的 CSS（我正在使用 SASS）：

.title { 
    font-size: 1.85em; 
}

.poem {
    width: 12.5em;
    height: 12.5em;
    padding: .0625;
    background-color: rgba(gray, 0.5);
    display: inline-flex;
    flex-direction: column;
}

.poem > a {
    flex: 0 0 auto;
}

.poem > a:first-child {
    flex: 1 1 auto;
}           

.poem > a:first-child:hover {
    background-color: rgba(255, 165, 0, 0.5);
}

This pen 显示我想如何布置元素，here 是它们在悬停/单击时的实际工作方式。

我的问题是，是否有任何方法可以阻止 flexbox 强制元素显示为 block 并保留它们 inline，或者检测是否专门对元素的文本进行了点击。

我意识到我可以将每个 a 包装在 div 中，但这将是非语义的，所以我宁愿把它作为最后的手段。

谢谢。

【问题讨论】：

标签： html css layout flexbox

【解决方案1】：

.poem {
    align-items: flex-start;
}

.poem > a:first-child {
    flex: 0 1 auto;
    margin-bottom: auto;
}

http://codepen.io/anon/pen/yGArn

【讨论】：