Question

我写过这个简单的CSS。我试图理解为什么当我将display: block放在锚标记中时，标记的宽度变得与<li>项相同。但是，当我删除display: block时，锚标记的宽度与其中的文本相同，正如人们所期望的那样

＆＃13;

#menu ul {
  margin-left: -2.5em;
}

#menu li {
  list-style-type: none;
  border: 2px black solid;
  background-color: gray;
  width: 20%;
  text-align: center;
  float: left;
}

#menu a {
  text-decoration: none;
  color: black;
  background-color: #EEEEFF;
  box-shadow: 5px 5px 5px gray;
  margin-bottom: 2px;
  margin-right: 2px;
  display: block;
  border: 3px solid #EEEEFF;
}

＆＃13;

<div id="menu">
  <ul>
    <li> <a href="#"> Google </a> </li>
    <li> <a href="#"> Yahoo </a> </li>
  </ul>
</div>

＆＃13;

Answer 1

显示block将设置为默认width: 100%，如果您想更改它，请在css代码中定义width。

当您删除代码中的display: block时，您的主播会使用其默认display: inline。

如果您想使用display: block并查看inline之类的元素，可以使用display: inline-block;

Answer 2

赋予标签display：block将允许元素占据div的整个宽度，并且在这一点上padding和margin属性也可以生效（padding和margin不能应用于内联元素，因为a标签）

使用display：block with anchor tag

2 个答案: