我正在尝试使用 div 制作 3 个按钮,并使用百分比水平对齐它们。我设法做到了这一点,但我在 div 之间得到了这些连字符。仅当我使用“display: inline-block;”时,连字符才会出现,但如果没有它,我无法以这种方式对齐它们。下面是 HTML、相关 CSS 和屏幕截图。
<a href="www.google.com">
<div class="home_buttons" id="book_app_button" >
<p>book appointment now</p>
</div>
</a>
<a href="www.facebook.com">
<div class="home_buttons" id="order_cl_button" >
<p>order contact lenses</p>
</div>
</a>
<a href="www.reddit.com">
<div class="home_buttons" id="contact_us_button" >
<p>contact us</p>
</div>
</a>
<style>
.home_buttons {
width: 10%;
height: 100px;
display: inline-block;
margin-right: 11%;
margin-left: 11%;
text-align: center;
vertical-align: top;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 90%;
}
</style>
这些不是连字符,而是您的默认下划线<a>
元素。
您可以使用以下命令删除它们text-decoration: none;
在你的CSS中
a {
text-decoration: none;
}
.home_buttons {
width: 10%;
height: 100px;
display: inline-block;
margin-right: 11%;
margin-left: 11%;
text-align: center;
vertical-align: top;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 90%;
}
<a href="www.google.com">
<div class="home_buttons" id="book_app_button" >
<p>book appointment now</p>
</div>
</a>
<a href="www.facebook.com">
<div class="home_buttons" id="order_cl_button" >
<p>order contact lenses</p>
</div>
</a>
<a href="www.reddit.com">
<div class="home_buttons" id="contact_us_button" >
<p>contact us</p>
</div>
</a>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)