我正在重建我学校的学生内部网以进行评估,但我遇到了按钮问题。正如您在图像中看到的,按钮链接之间的间隙中有一条水平线。
发生这种情况有什么原因吗?如果有帮助,我附上了网站按钮部分的 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>
的延续来自按钮代码的标记。改变他们的 display
来自 inline
的属性(property)(默认情况下)到 inline-block
应该可以解决这个问题。
.links a {
display: inline-block;
}
关于html - 按钮 HTML/CSS 后面的水平线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52845076/