只有當我點擊圖標不是整行時纔會發出提醒

我想點擊圖標不是整行時出現提示，但出於某種原因，我在整行上得到它。我究竟做錯了什麼？只有當我點擊圖標不是整行時纔會發出提醒

<div class="footer"> 
    <span id="scroll-top"> 
     <i class="fa fa-round fa-chevron-up"></i> 
    </span> 
</div> 

.footer { 
    background-color: black; 
    color: white; 
    padding-top: 40px; 
} 

.footer .fa-round { 
    padding: 0; 
    border-radius: 50%; 
    color: white; 
    background-color: red; 
    font-size: 1.3em; 
    line-height: 1.6em; 
    height: 34px; 
    width: 34px; 
} 

.footer #scroll-top { 
    display: block; 
    cursor: pointer; 
    z-index: 99999999; 
    text-align: center; 
    position: relative; 
    top: -50px; 
}

http://jsfiddle.net/hgu02x0b/1/

來源

2017-04-15 user4756836

變化'$（「＃滾動頂」）。點擊（）''到$（「i.fa - 雪佛龍達」）。點擊（）' – LGSon

送給你<span id="scroll-top">元素display: block，這使得它充分寬度。

所以，如果你改變你的點擊處理程序$("i.fa-chevron-up").click(...)它會工作

Updated fiddle

也可以更改<span id="scroll-top">到display: inline-block，並設置text-align: center在footer

Updated fiddle

或者，由於icon具有固定的寬度，就給<span id="scroll-top">的寬度相同，width: 34px並使用margin: 0 auto

Updated fiddle

來源

2017-04-15 18:51:34 LGSon

@ user4756836以下是3種方法來解決您的問題 – LGSon

由於第三種解決方案選擇爲正確答案。很乾淨 – user4756836

羽絨選民，請評論，以便我可以調整任何錯誤 – LGSon

你可以將你的目標元素上更加具體，此刻的你正在用的#scroll-top的ID定位的元素，但你可以更具體，目標區域內的圖標元素#scroll-top i

$("#scroll-top i").click(function() { 
 
    alert('test'); 
 
});

.footer { 
 
    background-color: black; 
 
    color: white; 
 
    padding-top: 40px; 
 
} 
 

 
.footer .fa-round { 
 
    padding: 0; 
 
    border-radius: 50%; 
 
    color: white; 
 
    background-color: red; 
 
    font-size: 1.3em; 
 
    line-height: 1.6em; 
 
    height: 34px; 
 
    width: 34px; 
 
} 
 

 
.footer #scroll-top { 
 
    display: block; 
 
    cursor: pointer; 
 
    z-index: 99999999; 
 
    text-align: center; 
 
    position: relative; 
 
    top: -50px; 
 
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="footer"> 
 
    <span id="scroll-top"> 
 
\t \t <i class="fa fa-round fa-chevron-up"></i> 
 
\t </span> 
 
</div>

來源

2017-04-15 18:50:20 Quince

您將span元素顯示爲塊，以覆蓋容器寬度。你可以採取這一點和文本對齊.footer所有子元素在中心

$("#scroll-top").click(function() { 
 
    alert('test'); 
 
});

.footer { 
 
    background-color: black; 
 
    color: white; 
 
    padding-top: 40px; 
 
} 
 

 
.footer .fa-round { 
 
    padding: 0; 
 
    border-radius: 50%; 
 
    color: white; 
 
    background-color: red; 
 
    font-size: 1.3em; 
 
    line-height: 1.6em; 
 
    height: 34px; 
 
    width: 34px; 
 
} 
 

 
.footer #scroll-top { 
 
    cursor: pointer; 
 
    z-index: 99999999; 
 
    text-align: center; 
 
    position: relative; 
 
    top: -50px; 
 
    display: inline-block; 
 
    position: relative; 
 
    left: 50%; 
 
    -moz-transform: translate(-50%, 0%); 
 
    -webkit-transform: translate(-50%, 0%); 
 
    -ms-transform: translate(-50%, 0%); 
 
    -o-transform: translate(-50%, 0%); 
 
    transform: translate(-50%, 0%); 
 

 
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="footer"> 
 
    <span id="scroll-top"> 
 
\t \t <i class="fa fa-round fa-chevron-up"></i> 
 
\t </span> 
 
</div>

來源

2017-04-15 18:50:55 repzero

任何其他方式來集中它沒有集中整個頁腳div？ – user4756836

是的，讓我編輯 – repzero

您可以使用transform屬性，特別是翻譯 – repzero

跨度設定爲display: block。這使得它佔據整行。您可以更改jQuery的更精確：

$("#scroll-top i").click(function() { 
    alert('test'); 
});

fiddle

來源

2017-04-15 18:50:59 sol

它更改爲顯示居中：直列塊。 http://jsfiddle.net/hgu02x0b/2/

.footer #scroll-top { 
    display: inline-block; 
    cursor: pointer; 
    z-index: 99999999; 
    text-align: center; 
    position: relative; 
    top: -50px; 
    left: 50%; 
    margin-left: -17px; 
}

希望這有助於

來源

2017-04-15 18:51:51 roxid

只有當我點擊圖標不是整行時纔會發出提醒

回答

相關問題