在Rails中使整个指针块(Div)可以正确点击?

时间:2013-07-01 15:14:51

标签: css ruby-on-rails html

在我的Rails应用程序中,用户可以搜索并且此搜索检索可以说5个结果。

每个结果都是一个大的矩形块,在这个块中有很多Div和东西。 当鼠标在此块上移动时,整个块将突出显示。我希望这个突出显示的块可以单击链接。

如果我使用此代码覆盖所有Div:

<%= link_to root_path do %>
  <div>Hey!</div>
<% end %>

只有一些单词可以点击并指向链接。不是我想要的整个突出显示的矩形块。

CSS文件:

 /* Lists */

.lists {
    background:#fff;
    color:#138cd6;
    font-size: 17px;
    font-weight: normal;
    display: block;
    font-family: 'Metrophobic', sans-serif;
    width: 940px;
    margin-bottom: 15px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #69769a;
   -webkit-border-radius: 4px;
   border-radius: 4px;
   -moz-border-radius: 4px;
}

.limeposts {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.limeskin:hover {
  background: #eee;
  cursor: pointer;
  display: block;
}

.limebox {
  padding: 15px;
  overflow: hidden; 
}

.limeface {
  width: 200px;
  float: left;
  margin-left: 20px;
  text-align: left;
}

.limecontent {
  width: 400px;
  float: left;
  margin-left: 0px;
  text-align: left;
}

.limecost {
  width: 200px;
  float: right;
  margin-right: 20px;
  text-align: left;
  border: 1px solid #7a8494;
  padding: 5px;
  width: 150px;
  height: 60px;
}

观点:

<% @posts.each do |post| %>
     <div class="lists">
    <ol class="limeposts">
      <li>
       <div class="limeskin">

        <div class="limebox">
         <div class="limecost">
          <b>Price:</b>
          <%= number_to_currency(post.price, :unit => "R") %><br>
          <b>Seats available:</b>
          <%= post.seat %>
          <b>Bagroom:</b>
          <%= post.bagroom %>
         </div>
          <div class="limeface">
           <b><%=post.user.name%></b>
          </div>
           <div class="limecontent">
            <b>From:</b>
            <%= post.from %> <br>
            <b>To:</b>
            <%= post.to %><br>
           <b> Date:</b>
            <%= post.date %>
           </div>
          </div>
         </div>
         </li>     
          </ol>
      </div> 
        <% end %>

我已经尝试过并试过一切。得到相同的结果!

0 个答案:

没有答案