0

a:hover { border-bottom: 2px; }がリンク自体の長さにわたって続く理由を教えて、誰かが私を助けてくれますか?

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>

ボーナス：

また、メニュー 1 - メニュー 4 をメニュー 5 - メニュー 8 (水平、中央) の上に配置するのに問題があります。

どうもありがとう！

4

2 に答える 2

3

要素がページに作成するボックスに境界線が適用されるため、適用したパディングの端まで境界線が適用されます。

テキストに下線を付けるだけの場合は、text-decoration: underline;

また、マークアップが無効です。 直接の子として<ul>のみ含めることができます。<li>リスト要素内にハイパーリンクを移動します。

<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>
于 2013-01-11T04:18:10.333 に答える
0 
li {
    margin-right: 28px;
    width: 135px;
}

aが含まれているのでli。マージンを含むのフルサイズは。内にあるため、アンダースコアはa本来あるべき値の下にあります。lia

于 2013-01-11T04:17:38.093 に答える