Question

我在这里有一个导航栏：

        <div id = "header">
        <h1 id = "title">  Max Atkins </h1>
        <a href = "http://users.aber.ac.uk/mta2/cs15020/Assignment">
            <div class = "headerButtons">  
                Home 
            </div> 
        </a>
        <a href = "http://users.aber.ac.uk/mta2/cs15020/Assignment/cv.html">
            <div class = "headerButtons"> 
                CV 
            </div>
        </a>
        <a href = "http://users.aber.ac.uk/mta2/cs15020/Assignment/coverletter.html">
            <div class = "headerButtons"> 
                Cover Letter
            </div>
        </a>
        <a href = "http://users.aber.ac.uk/mta2/cs15020/Assignment">
            <div class = "headerButtons"> 
                Write-Up
            </div>
        </a>
        <a href = "http://users.aber.ac.uk/mta2/wordpress">
            <div class = "headerButtons"> 
                WordPress 
            </div>
        </a>
        <a href = "http://users.aber.ac.uk/mta2/webshop/catalog">
            <div class = "headerButtons"> 
                WebShop
            </div>
        </a>
    </div>

这显示我的按钮之间的破折号，我也可以点击以发送给我链接。在此预览：http://users.aber.ac.uk/mta2/cs15020/Assignment/ 我如何摆脱这些？

CSS ADDED：

#header{
height: 130px;
background-color: #32313B;
border: #39B1C6 5px solid;
margin-bottom: 10px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
text-align: center;
}

#header{
height: 130px;
background-color: #32313B;
border: #39B1C6 5px solid;
margin-bottom: 10px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
text-align: center;
}

#title{
    font-family: Arial;
    color: #ababab;
    top: 20px;
}

.headerButtons{
    width: 10%;
    height: 25px;
    background-color: #6EC1C2;
    border: solid;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    display: inline-block;
    position: relative;
    font-family: Arial, #25242C;
    color: #333333;
    top: 10px;
    padding: 5px;
    margin-top: -20px;
    margin-left: 20px;
    margin-right: 20px;
}


#buttonDiv{
    text-align: center;
}

非常感谢

更新： CodePen显示问题。

Answer 1

试试这个。

#header a{
   text-decoration:none;
}

<强> CodePen

Answer 2

破折号实际上是带下划线的空格字符，您可以从html标记中删除空格或使用以下css

#header a {
    text-decoration:none;
}

Answer 3

默认情况下，您的锚标记（<a>...</a>）在大多数浏览器上都有CSS属性：

text-decoration: underline;

你看到的短划线实际上是一个空格字符的下划线，＆＃34;在<a>和封闭的<div>之间留下了＃34;

添加以下内容将删除破折号：

#header a {
    text-decoration: none;
}

查看fixed CodePen。

如何删除按钮之间的短划线链接？

3 个答案: