Link_to方法不使用CSS

Question

我必须在我的Rails视图中添加一个link_to方法，因为它在新标签页中打开了图片网址，与个人资料链接相反。

原始代码截图

- if user.avatar.present?
  .common_box.box1 data-user-id="#{user.username}"
    .img_box
      = image_tag user.avatar.try(:image_url)
      -if @user.present?  
        ul.btn_link.hide
          li
            a.message_btn  href="#" data-user="#{user.id}"  data-mfp-src='#message_me'   Message
          li
            = link_to "Save", follow_popup_user_path(user), class: 'save_btn', :'data-mfp-src'=>'#follow_div', remote: true
          li
            a.report_btn href="#" data-mfp-src='#report_me'  Report
    .img_detail
      small years
      .circle
        span.age_box class="#{user.gender == 'Male' ? '': 'pink'}" = user.age
      h3 class="#{user.gender == 'Male' ? '' : 'pink'}" = user.username
      h4 
        = user.address
      div class= "#{user.gender == 'Male' ? 'green_corner': 'pink_corner'}"
        =image_tag "#{user.gender == 'Male' ? 'side_curv.png': 'curv_2.png'}"

布局非常完美，但它会为新标签打开完整的图片网址。如果我点击图片框，我将转到用户个人资料。

我试图通过添加= link_to user do来解决此问题，它允许我打开带有个人资料网址的新标签页，但它会关闭CSS。看一下截图

如您所见，蓝色条从底部移动到顶部。

- if user.avatar.present?
  .common_box.box1 data-user-id="#{user.username}"
    .img_box
    = link_to user do
      = image_tag user.avatar.try(:image_url)
      -if @user.present?  
        ul.btn_link.hide
          li
            a.message_btn  href="#" data-user="#{user.id}"  data-mfp-src='#message_me'   Message
          li
            = link_to "Save", follow_popup_user_path(user), class: 'save_btn', :'data-mfp-src'=>'#follow_div', remote: true
          li
            a.report_btn href="#" data-mfp-src='#report_me'  Report

我是否将link_to方法放在错误的区域或使用错误？我正在使用载波宝石作为图片，如果它在任何一个因素中起作用。

的style.css：

#btm_container{ float:left; width:100%; background:#fff; border-top:1px solid #c6c6c5; padding:112px 0 0 0;}
.box_detail{ float:left; width:986px; margin:0 0 0 -6px;}
.box_detail .col{float:left; width:217px; margin:0 38px 0 0;}
.common_box{float:left; width:196px; padding:5px 5px 5px 6px; margin:0 0 53px 0; cursor: pointer;}
/*.common_box.box1{background:url(/assets/img_box_bg.png) no-repeat 0 0; min-height:364px;}*/
.common_box.box1{border: 1px solid #918a8a; border-radius: 5px}
.common_box .img_box{float:left; width:194px; border-bottom:3px solid #389aeb; position:relative; z-index:999;}
.common_box .img_box img{ float:left;}
.btn_link{float:left; width:185px; position:absolute; list-style:none; top:11px; left:10px;}
.btn_link li{float:left; padding:0 8px 0 0;}
.btn_link li a{float:left; text-align:center; padding:5px 0; font-size:12px; line-height:14px; color:#525252; text-decoration:none;}
.btn_link li .message_btn{ background:url(/assets/message_btn_bg.png) no-repeat 0 0; width:65px; height:27px; float:left;}
.btn_link li .save_btn{ background:url(/assets/save_btn_bg.png) no-repeat 0 0; width:42px; height:27px; float:left;}
.btn_link li .report_btn{ background:url(/assets/report_btn_bg.png) no-repeat 0 0; width:52px; height:27px; float:left;}
.age_box{width:45px;  background:url(/assets/green_bg.png) no-repeat 0 0; text-align:center; padding:8px 0; font-size:26px; line-height:30px;color:#fff; position:absolute; float:left;}
.img_detail{float:left; background:#f5f5f5; width:180px; padding:0 0 5px 14px; position:relative; z-index:99;}
.img_detail small{font-size:13px; line-height:16px; color:#5b5b5b; padding:5px 37px 0 0; width:106px; text-align:right; float:right; font-style:italic;}
.img_detail h3{float:left; width:100%; font-size:19px; line-height:19px; color:#39a0f6; padding:9px 0 0 0;}
.img_detail h4{ float:left; width:100%; font-size:13px; line-height:15px; color:#5b5b5b; padding:4px 0 0 0; font-style:italic;}
.img_detail .green_corner{float:right; position:absolute; right:0px; bottom:0px;}
.img_detail .pink_corner{float:right; position:absolute; right:0px; bottom:0px;}
.age_box.pink{ background:url(/assets/pink_bg1.png) no-repeat 0 0;}
.img_detail h3.pink{ color:#e36b83;}

Answer 1

您与图片的链接应位于.img_box内，这是具有底部边框的元素。现在它处于相同的缩进级别，这使得它们一个接一个地渲染，从而使边界位于顶部。

此外，如果您想要的只是可点击的图像，那么您在链接中添加了太多内容。您可以通过删除图像后面的一些缩进来修复，以便ul和其余所有内容都在链接之外，具有= link_to ...行的相同缩进

- if user.avatar.present?
  .common_box.box1 data-user-id="#{user.username}"
    .img_box
      = link_to user do
        = image_tag user.avatar.try(:image_url)
      -if @user.present?  
        ul.btn_link.hide
          li 

这是一个常见的错误，有时缩进可能会令人困惑。