HTML element which defaults to display:inline-block?

<div> defaults to block

<span> defaults to inline

Is there one that defaults to inline-block?

If not, what special tag name would be appropriate for me to apply 'inline-block' using CSS?
Or should I stick to using a class?

27972 次浏览
小开

button、 textarea、 input和 select默认为 inline-block。

如果你想要 inline-block一个 div你会给它一个类名。

.inline-block {
display: inline-block
}

然后..。

<div class="inline-block"></div>

更正

关于 img我搞错了。它似乎默认为 inline而不是 inline-block

小开
最佳答案

从我可以告诉 <img>标签是唯一的 inline-block默认。为了安全起见，我建议使用一个类，您永远不知道什么时候更改某种类型的所有元素会反过来影响您。或者，您总是可以创建自己的标记并为其分配 display:inline-block;。这样就不会改变标准元素的默认功能..。

剪辑

button、 textarea、 input和 select元素也是 inline-block

资料来源:

根据这个 img是 inline-block http://dev.w3.org/html5/markup/img.html#img-display

这里声称 button，textarea等等也是: http://www.w3.org/TR/CSS2/sample.html

编辑 # 2

虽然上面的消息来源声称 img标签是 inline-block，但看起来(多亏了 Alohci)它们只是 inline http://jsfiddle.net/AQ2yp/

在 Firefox 中测试了以下内容:

button是 inline-block: http://jsfiddle.net/GLS4P/

textarea是 inline: http://jsfiddle.net/235vc/

input是 inline: http://jsfiddle.net/RFKe8/

select是 inline-block: http://jsfiddle.net/5B4Gs/

小开

下面是一个 Fiddle，它获取大多数 HTML 标记的默认显示值。

小提琴

在 chrome 中，默认的 inline-block 元素是: "INPUT", "BUTTON", "TEXTAREA", "SELECT"

小开

是的，有一个默认为内联的元素。

答案是 span 元素。

<span>
小开

有没有默认为 inline-block的？

严格来说，是 不，没有。W3HTML 规范从不为 任何元素指定默认的 CSS 属性值。他们确实为 HTML 4提供了一个 “默认样式表”，但是开发人员只能使用 鼓励——这不是一个必要条件或任何类型的命令。HTML 5规范指出“典型的默认显示属性”，但是，同样，这些属性并不是必需的(还要记住，无论如何，HTML 5仍然是一个 工作草稿)。

因此，所有默认值都由浏览器决定，开发人员实际上认为应该如何向用户显示元素。没有人能够保证某个特定的元素会以 inline-block或其他任何方式显示在某人的浏览器中。不要依赖于“默认值”

如果没有，那么什么特殊的标签名称适合我使用 CSS 应用“ inline-block”？或者我应该继续使用类？

这取决于您以及您如何设计您的页面。应始终使用与其中包含的内容在语义上相适应的元素。如果元素将 一直都是用在需要 inline-block显示的上下文中，请务必将其设置为样式表中的样式。否则，您将不得不求助于类或更具体的选择器，以使您的元素能够正确显示。

小开

原则上，它取决于浏览器中每个元素的 display属性的默认值。甚至 HTML5草案也没有规定必须使用什么值，尽管它用 CSS 表示元素的“预期呈现”。

根据 CSS 2.1规范中的 默认样式表 for HTML，默认具有 display: inline-block的元素是 button、 input、 select和 textarea。浏览器使用这样的设置，但是在 Firefox 中，这只适用于 button和 select。

在 HTML5 CR 的 渲染部分，meter和 progress元素被额外描述为具有内联块的“预期呈现”，并且已经实现了这些元素的浏览器似乎是这样行事的。keygen元素也被描述为一个内联块，但 Firefox 没有这样做(它在内部实现了 keygen作为 DOM 中的 select) ; IE 根本不支持 keygen; Chrome 按照建议实现了它。

由于所有这些元素都具有相当专门的含义、功能和呈现特性，因此它们都不足以作为默认为内联块且可能具有各种含义的元素进行通用使用。对于这样的元素，通常可以使用 span或 div，具体取决于您喜欢使用内联还是使用块作为默认呈现。

小开

默认情况下，您可以使用所有 HTML 元素及其 display属性检查我的 Codepen

目前，FF中有 5元素和 display: inline-block元素:

  1. <button>
  2. <select>
  3. <meter>
  4. <progress>
  5. <marquee>

在 Chrome 中增加 2 (包括以上5项):

  1. textarea
  2. input
小开

这个问题现在还不能真正回答这个问题，但是如果有足够的支持，总有一天它会成为真正的答案。

<seg>是“段”的简称。

填充物:

<style> seg { display: inline-block; } </style>

如果有一个正式的名字就好了，但是没有，所以这里有一个我所知道的最好的名字(IMO)。

小开

现在您可以创建一个 Custom Element (例如: <inline-block>或其他) ，它的 CSS 属性 display默认设置为 inline-block。

customElements.define( 'inline-block', class extends HTMLElement {
constructor() {
super()
this.attachShadow( { mode: 'open' } )
.innerHTML = `<style> :host { display: inline-block } </style>
<slot></slot>`
}
} )
#hw { background-color: lightblue }
<inline-block id="hw">Hello World</inline-block>

小开

我的解决方案是声明我所谓的 slice。

CSS

sl {
display: inline-block;
}

用法

<sl>inline block stuff</sl>

提交答案