在<span>标签内放置<button>标签是正确的放置方式。

Question

我有一个需求，需要在一个框中显示文本和按钮。我把按钮标签放在带有文本和按钮的标签里。

  inside span tag
  +-------------------+
  | text here         |
  |                   |    
  | <button> tag here |
  +-------------------+

我的问题是在内部放置按钮是否正确。正如我们刚学到的，是内联元素，只能包含文本、图像等。

HTML标签<div>和<span>有什么区别？

- pappu_kutty

---

我有一个盒子列表，其中包含切换按钮，例如邀请/忽略功能，用于每个人的盒子。 - pappu_kutty

您不能将块级元素放置在span（或任何内联元素）内，但按钮是内联元素，可以放置在span内，因此如果您正在寻找包含文本和另一个内联元素的内联元素，则是正确的方法。 - adeneo

Answer 1

当然，您可以使用CSS将span呈现为块元素，甚至是内联块元素，如果需要的话。

.yourSpanClass {
    display: block;
}

.yourSpanClass {
    display: inline-block;
}

如果您可以访问HTML，则建议您仅使用div。

支持的浏览器：http://caniuse.com/inline-block

- Smurker

---

按钮元素确实呈现为内联元素。这只是一个例子，如果他需要将 span 呈现为块级元素。 - Smurker

IE支持inline-block元素，但只能与块级元素一起使用。对于内联元素，您需要使用CSS hack： display: inline-block; *display: inline; zoom: 1; - Andy1210

不知道那个技巧。谢谢！ - Smurker

Answer 2

放弃按钮，使用CSS/jQuery将span变成按钮。别忘了设置:hover样式并使用JS/jQ执行预期操作。

- MayTheSchwartzBeWithYou

---

这里的语义混乱了，一个 span 就是一个 span，一个 button 就是一个 button。 - user1017882

说谁？他需要在按钮内部放置一个span。 - MayTheSchwartzBeWithYou

使用CSS/jQuery将span变成按钮。模拟其他元素的样式和定义元素是一个不好的想法。如果span需要成为一个按钮-它应该是一个按钮元素。我可以样式化一个span来模仿H1，但并不意味着它应该这样做。遵循语义可能会有些麻烦，但它是值得的。其中之一是可访问性-如果该元素类型通常仅用于静态内容，那么视觉障碍用户如何访问与该元素交互的能力？ - user1017882