为什么我会得到这些连字符？

Question

我正在尝试使用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>

Answer 1

这些不是连字符，而是<a>元素的默认下划线 您可以在css中使用text-decoration: none;删除它们

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;