link_to + CSS无法正常工作

Question

这是怎么回事？ 我正在一次学习Rails，HTML和CSS上的ruby。 我正在尝试在Rails应用程序中使用网站模板，而link_to帮助程序存在问题。 我认为这可能与CSS样式表有关。

this is my html chunk of code:

<h3>Featured Products</h3>
                <ul>
                    <% @books.each do |book| %>
                        <li>
                            <div class="product">
                                <%= link_to book_path(book.id) do %>
                                <a class="info">
                                    <span class="holder">
                                        <%= image_tag(book.image, alt: "") %>
                                        <span class="book-name"><%= book.name %></span>
                                        <span class="author">by <%= book.author_id %></span>
                                        <span class="description"><%= book.description.first(60)+"..." %></span>
                                    </span> 
                                </a>
                                <% end %>
                                <a href="#" class="buy-btn">BUY NOW <span class="price"><span class="low">$</span><%= book.price %><span class="high">00</span></span></a>
                            </div>
                        </li>
                    <% end %>
                </ul>

and this is my css chunk of code:

.products ul { list-style: none; position: relative; width: 660px; margin-left: -7px; width: 660px; }
.products ul li { float: left; display: inline; width: 150px; height: 343px; margin: 0 15px 14px 0; }
.products ul li a.info { display: block; padding: 7px; width: 136px; height: 329px; }
.products ul li a.info:hover { background: asset_url("product-hover.png") no-repeat 0 0; text-decoration: none; }
.products ul li a.info .holder { padding: 14px 9px; border: solid 1px #dcdcdc; display: block; height: 290px;}
.products .product { width: 134px; position: relative; }
.products img { padding: 0 7px 4px; width: 102px; height: 160px; }
.product .buy-btn { position: absolute; bottom: 8px; left: 7px; background: asset_url("buy-btn.png") repeat-x 0 0; width: 126px; height: 31px; color: #fff; font-size: 12px; line-height: 31px; text-transform: uppercase; font-weight: bold; z-index: 10; padding-left: 10px; white-space: nowrap;}
.product .buy-btn:hover { text-decoration: none; }
.product .buy-btn .price { padding: 0 7px; background: asset_url("price.png") repeat-x 0 0; font-size: 22px; line-height: 29px; position: absolute; top: 0; right: 0; height: 31px; }
.product .buy-btn .price .low { font-size: 14px; vertical-align: baseline; }
.product .buy-btn .price .high { font-size: 11px; line-height: 14px; vertical-align: super; }

任何想法？

Answer 1

您的链接无效，因为正如我在评论中所说，嵌套的HTML语法中禁止使用元素，并且它们根本无法工作 。 HTML规范没有说明原因； 他们只是强调规则。

更新：

正如我在评论中所说，您可以通过这种方式来实现。 为了使其正常工作，您必须将外部锚点更改为div并使用js来调用您的网址，如下所示：

<div id="some-id" data-href="path">
  <a href="#"></a>
</div>

使用js调用您的外部div

$(document).on("click","#some-id",function(){
  var link = $(this).data("href");
  window.location.href = link;
})