Question

我的应用程序显示了一组行中的帖子列表（标题+数据）。标题与行的左侧对齐，右侧的日期对齐，它们之间有一些空格。类似的东西：

标题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>

这是我的css.scss：

.post {
margin-left: auto;
margin-right: auto;
width:  900px;
height: 40px;
border-bottom: 1px solid #BDBDBD;}

.title {  font-size: 2.1em;}

.date {  float: right;  margin-right: 40px;  margin-top: 10px; }

Answer 1

使用a { display: block; }。

显然，使用类只选择您想要显示的链接，否则您网站上的所有链接都会更改其显示行为。

默认情况下，锚标记已定义display: inline，这意味着它应该呈现为文本元素。定义为display: inline（不出所料）的元素的交互区域是文本区域。将其更改为显示为块元素会更改元素的框模型;可点击区域也会发生变化，更符合您对div的期望。

Answer 2

首先，您可以通过将块传递给link_to

来改进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>

应该是

<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;}

给你的css。

我也很高兴你使用.post宽度的流体值（因此宽度小于900px的设备仍然可以呈现相同的预期布局），但这取决于你。

看到这个小提琴来检查它的外观https://jsfiddle.net/ovxh94k7/3/

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

2 个答案: