[英]Horizontal lines behind buttons HTML/CSS
我正在重建學校的學生內部網絡以進行評估,但遇到按鈕問題。 如您在圖像中看到的,在按鈕鏈接之間的間隙中看到一條水平線。
這有什么原因嗎? 如果有幫助,我已經在網站的按鈕部分附加了CSS和HTML代碼。
CSS:
.button {
background-color:rgba(255, 255, 255, 0.5);
border:none;
width:auto;
height:auto;
border-radius:3px;
color:#ffffff;
font-size:16px;
cursor:pointer;
padding:15px;
z-index:3;
}
.button:hover {
color:#000000;
transition:.2s;
background-color:rgba(255, 255, 255, 0.8);
padding-left:18px;
padding-right:18px;
}
.button:active {
color:#000000;
}
.button:focus {
outline-color:gold;
}
HTML:
<div class="links">
<h2>Links</h2>
<a href="http://jhclibrary.weebly.com/" alt="JHC Library Website">
<button class="button">
Library Website
</button>
</a>
<a href="http://jhclibrary.weebly.com/research.html" alt="Research">
<button class="button">
Research
</button>
</a>
<a href="http://jameshargestcollege.wheelers.co/" alt="eBooks">
<button class="button">
eBooks
</button>
</a>
<a href="10.0.0.7" alt="Library Catalogue">
<button class="button">
Library Catalogue
</button>
</a>
<br><br>
<a href="http://studentintranet/Documents/SubjectBooklets/ElLink.html" alt="Subject Booklets">
<button class="button">
Subject Booklets
</button>
</a>
<a href="http://studentintranet/Documents/Options/ElLink.html" alt="Option Books">
<button class="button">
Option Books
</button>
</a>
</div>
任何幫助表示贊賞。 謝謝!
將<a>
標簽移到<button>
標簽內
<div class="links">
<h2>Links</h2>
<button class="button">
<a href="http://jhclibrary.weebly.com/" alt="JHC Library Website">
Library Website
</a>
</button>
<button class="button">
<a href="http://jhclibrary.weebly.com/research.html" alt="Research"> Research
</a>
</button>
<button class="button">
<a href="http://jameshargestcollege.wheelers.co/" alt="eBooks">
eBooks
</a>
</button>
<button class="button">
<a href="10.0.0.7" alt="Library Catalogue">
Library Catalogue
</a>
</button>
<br>
<br>
<button class="button"> <a href="http://studentintranet/Documents/SubjectBooklets/ElLink.html" alt="Subject Booklets">
Subject Booklets
</a>
</button>
<button class="button">
<a href="http://studentintranet/Documents/Options/ElLink.html" alt="Option Books">Option Books
</a>
</button>
</div>
該行是按鈕代碼中<a>
標記的延續。 將其display
屬性從inline
(默認情況下)更改為inline-block
應該可以解決此問題。
.links a {
display: inline-block;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.