CSS中改变超链接的长宽

关键词：display: block;

eg. 我希望改变下图按钮链接的背景颜色，当鼠标悬浮时（：hover）文本颜色为白色，背景颜色为红色。（图1的home按钮变为图2）

图一

图二

---

HTML

<li><a href="#">Home</a></li>
<li><a href="#">finding us</a></li>
<li><a href="#">course</a></li>
<li><a href="#">staff</a></li>
<li><a href="#">media</a></li>
<li><a href="#">Home</a></li>

第一版错误的CSS

nav a {
  outline: none;
  text-decoration: none;
  color: #a66;
  line-height: 50px;
  height: 50px;
  text-align: center;
}

nav a:hover {
  color: rgb(255, 255, 255);
  background:#a66;
}

li {
  border: #a66 solid 1px;
}

我原本的想法是a的背景颜色的范围就是li的大小，结果：

?为啥和预想的不一样。所以我又仔细研读了MDN的styling link这一部分。发现需要添加display: block; /*用于设置a的长宽背景等*/这样就可以修改超链接的长宽了。

所以正确的CSS是这样的！

nav a {
  outline: none;
  text-decoration: none;
  display: block;   /*用于设置a的长宽背景等*/
  width: 100%;  /*表明a的宽和li一致*/
  height: 50px;  /*设置长*/
  line-height: 50px;
  color: #a66;
  border: #a66 solid 1px;
  text-align: center;
}

nav a:hover {
  color: rgb(255, 255, 255);
  background:#a66;
}

此时超链接的范围是height: 50px和width: 100%等于li。

display: block;   //⚠️我写的是纵向的nav，所以没有给li设置diaplay，因为li本身是block元素。display：block表示元素块状分布，每一个元素占新的行，可以调整height和width属性。属于html默认布局

display: inline;    //表示元素在同一行。不能调整height和width属性。

display: inline-block； //这对于不希望项目突破到新行但希望宽度和高度能修改并避免重叠的情况非常有用。比如横向排列的nav

如果要达到下图效果（横向的nav）是这样的

<ul>
            <li>
                <a href="images/crown.jpeg">Crown</a>
            </li>
            <li>
                <a href="images/light.jpg">Fireworks</a>
            </li>
            <li>
                <a href="images/mission.jpeg">Mission</a>
            </li>
            <li>
                <a href="images/leave.jpeg">Leave</a>
            </li>
        </ul>

a {
    color: rgb(75, 75, 75);
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
    border: rgb(94, 94, 94) solid 1px; /*给链接设置外框*/
    display: inline-block; /*inline-block用来修改链接的长宽。如果是block就变成纵向的nav了，如果是inline，就无法修改长宽了。所以只能用inline-block. */
    width: 100px;     /*这是链接的长*/
    height: 30px;  /*这是链接的高*/
    line-height: 30px;  /*让文本在链接的border中线对齐*/
    text-align: center; /*让文本在border中居中*/
}

li {
    padding: 1em;
    list-style: none;
    display: inline-block; /*让li一行排开而不是纵向排开。改成inline也可以，但是上下的padding是无效的，只有左右有效，我想padding的上下左右都生效，让行间距大一点，所以用的inline-block*/

}
a:hover {
    background-color: #333;
    color: rgb(255, 255, 255);
}