Html 链接的可点击区域仅在文本上，不在整行上

我的应用程序在一组行中显示帖子标题+数据的列表。标题与行的左侧对齐，日期与行的右侧对齐，两者之间有一些空格。比如：

标题1日期1

标题2-日期2

…等等

我试图用一个链接来覆盖所有空白，不仅仅是标题和日期，而且当我用鼠标悬空空白时，我就没有反应。如果我将标题或日期悬停，我会得到浏览器的链接响应

我做错了什么？谢谢你抽出时间

我的html.erb中有以下内容：

    <div class="post" id="<%= post.name %>">    
    <a href="<%= post_path(post) %>">
            <span class="title"><%= post.title %></span>
            <span class="date"><%= post.created_at.to_date.strftime("%b %e") %></span>
    </a>  
    </div>

使用{display:block；}

显然，使用一个类只选择你想要显示的链接，否则你网站上的所有链接的显示行为都会改变

---

默认情况下，锚定标记定义了display:inline，这意味着它应该呈现为文本元素。毫不奇怪，定义为display:inline的元素的交互区域是文本区域。将其更改为显示为块图元将更改图元的长方体模型；可点击区域也会发生变化，使其更符合您对div的期望。

首先，您可以通过传递一个块来链接来改进rails代码

<div class="post" id="<%= post.name %>">
    <a href="<%= post_path(post) %>">
        <span class="title"><%= post.title %></span>
        <span class="date"><%= post.created_at.to_date.strftime("%b %e") %></span>
    </a>  
</div>

到你的css

我还建议您在.post宽度中使用流体值，这样宽度小于900px的设备仍然可以呈现相同的预期布局，但这取决于您

---

看看这把小提琴，看看它是什么样子的

非常感谢，可以用了。我在.post中定义了a{display:block；}，现在该行都可以单击了。问题是{}中定义的链接样式，现在也适用于.title和.date文本。例如，如何为定义链接样式的类中的类设置不同的字体颜色？我的意思是，在这个特殊的情况下，我如何自定义文本？标题和日期，除了在POST中定义的链接格式？如果你的标题和日期样式看起来被锚标签的一些样式所覆盖，你应该考虑显式地声明它们。请看这个更新的提琴：非常感谢，你的例子很有说明性，在这个问题上对我帮助很大。

<div class="post" id="<%= post.name %>">
    <a href="<%= post_path(post) %>">
        <span class="title"><%= post.title %></span>
        <span class="date"><%= post.created_at.to_date.strftime("%b %e") %></span>
    </a>  
</div>

<div class="post" id="<%= post.name %>">
<%= link_to post_path(post) do %>
    <span class="title"><%= post.title %></span>
    <span class="date"><%= post.created_at.to_date.strftime("%b %e") %></span>
<% end %>
</div>

.post a{ display:block;}