按钮和链接样式表现不同

问题描述 投票:0回答:1

我有两个元素(<a><button>),它们都是从Tachyons共享相同的类:

<a class="f4 br2 fw9 pa3 bg-dark-blue white link db tc lh-solid fixed left-1 bottom-1 right-1 mla mra z-1  " href="/edit-profile/photos"
>Confirm account</a>

<button class="f4 br2 fw9 pa3 bg-dark-blue white link db tc lh-solid fixed left-1 bottom-1 right-1 mla mra z-1  " type="submit">Next</button>

预期的行为是它们都是相同的宽度,但它们是不同的(尽管样式相同)。

知道这里发生了什么吗?

Here's a Codepen demonstrating the issue.

css button hyperlink styles anchor
1个回答
0
投票

在您的特定情况下,按钮具有边框和不同的字体,这是您的浏览器的默认样式。每个浏览器都有自己的默认值用于每种类型的元素,这就是为什么按钮和链接看起来像他们没有任何样式的方式。事实上说“没有任何造型”是不对的,而是“没有任何额外的造型”:

<button>I'm a button</button>
<a href="">I'm a link</a>

我没有通过你所拥有的所有css,因为你有一个单独元素的17个类而且我太懒了,但它实际上可能有不同的样式用于具有公共类的不同元素:

.awesome {
  display: inline-block;
  border: 5px solid;
  width: 200px;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  margin: 10px 0 10px 10px;
  font-family: Arial, serif;
}
div.awesome {
  background-color: deepskyblue;
  border-color: royalblue;
  font-style: italic;
  color: darkslateblue;
}
span.awesome {
  background-color: orangered;
  border-color: firebrick;
  font-weight: bold;
  color: gold;
}
<div class="awesome">I'm a div</div>
<span class="awesome">I'm a span</span>
© www.soinside.com 2019 - 2024. All rights reserved.