Question

给出以下代码段：

div {
  width: 150px;
  line-height: 1.5;
}

a,
button {
  background: red;
}

button {
  display: inline;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  margin: 0;
  border: none;
  text-align: left;
}

<div>
  Some text
  <a>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </a>
  Some text

  <br />
  <br /> Some text
  <button>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </button> Some text
</div>

我将如何使以<button>为包装的第二个块看起来与以<a>为包装的那个相同？

我试图用一个文本按钮打开模式，当文本换行时出现问题。当然，我只能使用<a>，但这在语义上是不正确的。

不能设置white-space: nowrap。

我认为display: inline已经解决了，但是我缺少任何内部浏览器样式吗？

这必须与IE10兼容，所以我不能使用display: content或unset: all。

Answer 1

喜欢吗？

div {
  width: 150px;
  line-height: 1.5;
}

a,
button {
  background: red;
}

button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}

<div>
  Some text
  <a>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </a>
  Some text

  <br />
  <br /> Some text
  <button>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </button> Some text
</div>

Answer 2

添加到您的按钮（将宽度设置为0，背景透明，并设置相同的div线高）

  width: 0;
  background:transparent;
  line-height: 1.5;

还将红色背景更改为button span选择器，而不是button选择器

div {
  width: 100px;
  line-height: 1.5;
}

a,
button span {
  background: red;
}

button {
  display: block;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  margin: 0;
  border: none;
  width: 0;
  background:transparent;
  line-height: 1.5;
}

<div>
  Some text
  <a>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </a>
  Some text
  <br />
  <br />
  Some text
  <button>
    <span>abcdefghi abcdefghi abcdefghi abcdefghi</span>
  </button>
  Some text
</div>

Answer 3

我可能会质疑您为什么认为这里的a元素在语义上不准确？

来自MDN

HTML元素（或锚元素）及其href属性创建指向其他网页，文件，同一页面中的位置，电子邮件地址或任何其他URL的超链接。

我会认为模式是同一页面中的一个位置。实际上，如果您要谈论PWA（渐进式Web应用程序）和一般可用性，我建议您的模式有一个特定的URL，这使a更加相关。

最后，从可用性的角度来看，按钮应该看起来像按钮（在限制内）。我会说伪装成链接比使用a更糟糕。

Answer 4

参见此处：https://stackoverflow.com/a/1368286/12149235

上面链接的更有效版本是：

button {
  background: none!important;
  border: none;
  padding: 0!important;
  text-decoration: underline;
  cursor: pointer;
}

如何将<button>设置为<a>样式？

4 个答案: