html - link_to + css 无法正常工作

Question

怎么了？ 我正在同时学习 ruby​​ on rails、html 和 css。 我正在尝试在我的 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 规范没有说明原因；他们只是强调规则。

更新:

正如我在评论中所说，您可以通过一种技巧来做到这一点。为了让它工作，你必须将你的外部 anchor 更改为 div 并使用 js 来调用你的 url，如下所示:

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