为什么我得到这些连字符？ [英] Why do I get these hyphens?

问题描述

我正在尝试使用div制作3个按钮，并使用百分比水平对齐它们。我设法做到了，但是我在div之间得到了这些连字符。连字符仅在我使用 display：inline-block;时出现，但如果没有使用连字符，我就无法以这种方式对齐它们。这是HTML，响应核心的CSS和下面的屏幕截图。

I am trying to make 3 buttons using divs, and align them horizontally using percentages. I managed to do that, but I get these hyphens between the divs. The hyphens appear only when I use 'display: inline-block;', but without it I didn't manage to align them this way. Here is the HTML, coresponing CSS and a screenshot below.

<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删除它们：无； 在您的CSS中

Those are not hyphens, but the default underline of your <a>elements.
You can remove them with text-decoration: none; in your 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>

这篇关于为什么我得到这些连字符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！