CSS a:hover border-bottom length

StackOverflow https://stackoverflow.com/questions/14271550

Pergunta

Could anyone help me out by telling me why the a:hover { border-bottom: 2px; } continues on over the length of the link itself?

body {
    margin: 0;
    font-family: "Georgia", "Times New Roman", "Times", "serif";
}

header {
    background-color: #191919;
    padding: 56px;
    text-align: center;
}

div {
    display: inline;
}

ul {
    list-style-type: none;
    display: inline;
    color: #ffffff;
}

li {
    display: inline;
    margin-right: 28px;
    width: 135px;
}

a {
    text-decoration: none;
    color: #ffffff;
}

a:hover {
    border-bottom: 2px solid #ac9962;
    font-size: 18px;
}

a:active {
    border-bottom: 2px solid #ac9962;
    font-size: 18px
}

<!DOCTYPE HTML>
<html>
    <head>
    <title>HTML</title>
    <link rel="stylesheet" type="text/css" href="stylesheet2.css" />
</head>

<body>
    <header>
         <nav>
        <ul>
           <a href="www.youtube.com"><li>Menu 1</li></a>
           <a href="www.youtube.com"><li>Menu 2</li></a>
           <a href="www.youtube.com"><li>Menu 3</li></a>
           <a href="www.youtube.com"><li>Menu 4</li></a>
           <a href="www.youtube.com"><li>Menu 5</li></a>
               <a href="www.youtube.com"><li>Menu 6</li></a>
           <a href="www.youtube.com"><li>Menu 7</li></a>
               <a href="www.youtube.com"><li>Menu 8</li></a>
            </ul>
         </nav>
    </header>
</body>
</html>

bonus:

I'm also having trouble getting Menu 1 - Menu 4 on top of Menu 5 - Menu 8 (horizontally, centered)

Thanks alot!

Foi útil?

Solução

Borders are applied to the box that the element creates in the page, so it will also continue to the edge of any padding you have applied.

If you just want the text underlined, use text-decoration: underline;

Also, your markup is invalid. <ul> can only contain <li> as it's immediate children. Move your hyperlinks inside the list elements.

<ul>
   <li><a href="www.youtube.com">Menu 1</a></li>
   <li><a href="www.youtube.com">Menu 2</a></li>
   <li><a href="www.youtube.com">Menu 3</a></li>
   <li><a href="www.youtube.com">Menu 4</a></li>
   <li><a href="www.youtube.com">Menu 5</a></li>
   <li><a href="www.youtube.com">Menu 6</a></li>
   <li><a href="www.youtube.com">Menu 7</a></li>
   <li><a href="www.youtube.com">Menu 8</a></li>
</ul>

Outras dicas

li {
    margin-right: 28px;
    width: 135px;
}

Since the a contains an li. The underline is under the a as it should be, since the full size of the li, including margin is within the a.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top