Как удалить тире ссылки между моими кнопками?

Question

Как удалить тире ссылки между моими кнопками?

0

У меня есть панель навигации здесь:

        <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 показывает проблему.

Max Atkins 14 март 2014, в 12:03

Источник

0

Нужна также и CSS.
Tony Cronin 14 март 2014, в 11:03

Теги:

html

html5

hyperlink

navbar

3 ответа

1

Попробуй это.

#header a{
   text-decoration:none;
}

CodePen

Zafar 14 март 2014, в 08:49

0

По умолчанию ваши якорные теги (<a>...</a>) имеют свойство CSS в большинстве браузеров:

text-decoration: underline;

То, что вы видите как тире, на самом деле является некоторым подчеркиванием пробельного символа, который был "оставлен" между <a> и приложенным <div>.

Добавление следующего удаления тире:

#header a {
    text-decoration: none;
}

См. Фиксированный код.

snooze92 14 март 2014, в 08:49

Ещё вопросы

Valerij · Accepted Answer · 2014-03-14T09-37-00.000Z

тире на самом деле является подчеркнутым символом пробела, вы можете либо удалить пробел из своей разметки html, либо использовать следующий css

#header a {
    text-decoration:none;
}

Вообще-то, делать то и другое было бы лучше.
спасибо всем, отсортировано сейчас: D