Question

我希望按钮的蓝色部分长度彼此相同，所以它在列中看起来很酷而不是所有凌乱的

上下文上下文上下文

.button {
  border: 0px solid #000000;
  background: #70D4C7;
  padding: 3.5px 7px;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  text-shadow: #70D4C7 0 1px 0;
  font-size: 20.5px;
  font-family: Fira Sans;
  text-decoration: none;
  vertical-align: middle;
  text-align: center;
  color: #000000;
}

<!doctype html>
<html>

<head>

</head>

<body>
  <div id="button">
    <a href="#" style="color: black" class="button"><strong>Homepage</strong></a>
    <br>
    <br>
    <a href="#" style="color: black" class="button"> <strong>exampleexample</strong>
    </a>
    <br>
    <br>
    <a href="#" style="color: black" class="button"><strong>example  </strong></a>
    </nav>
    <p></p>
  </div>
</body>

</html>

Answer 1

您可以将每个链接包装在div中：

<div>
    <a href="#" style="color: black" class="button"><strong>Homepage</strong></a>
</div>

删除<br/>标记。并添加以下CSS（注意，我将CSS段中的背景颜色移到此处）：

#button > div {
  margin: 10px;
  width: 100%;
  background: #70D4C7;
}

#button {
  width: 40%;
}

注意：通常认为将元素用于其他目的之外的编码风格较差。因此，例如，按钮应该用作按钮，链接应该用作链接。链接不应该被设置为按钮。但是，如果您坚持目前的结构，上述修改将产生以下效果：

Here is a Fiddle Demo

Answer 2

<a>默认为display:inline，因此不能有宽度。只需添加到课程button：

.button{
     width:200px;
     display:block;
}

，你的问题就解决了。

我希望按钮的蓝色位长度彼此相同

2 个答案: