Link_to方法不适用于CSS

Question

我必须在我的Rails视图中添加一个link_to方法，因为它正在一个新的选项卡中打开图像URL，与配置文件链接相反。

原始代码截图

- 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'}"

布局是完美的，但是它将为新选项卡打开完整的图像URL。 如果单击图片框，我将被定向到用户个人资料。

我试图通过添加= link_to user do来解决此问题，它允许我使用配置文件url打开一个新选项卡，但它使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 

这是一个常见错误，有时缩进可能会造成混淆。