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 

這是一個常見錯誤，有時縮進可能會造成混淆。