给定以下代码段:
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>
我怎样才能使第二个 block 带有 <button>
因为包装器看起来与带有 <a>
的包装器相同作为包装器?
我试图制作一个文本内按钮来打开模式,当文本换行时出现问题。当然我可以使用 <a>
但这在语义上并不准确。
设置white-space: nowrap
不是一个选项。
我会想 display: inline
本来可以解决的,但是有没有我遗漏的内部浏览器样式?
这需要与 IE10 兼容,所以我不能使用 display: content
或 unset: all
.
最佳答案
像这样?
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>
关于html - 如何设置 <button> 的样式使其看起来像 <a>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58298708/