HTML元素默认为显示：内联块？

问题描述 投票：56回答：10

<div>默认为block

<span>默认为inline

是否有一个默认为inline-block？

如果不是，有什么特殊的标记名称将适合我申请“inline-block的”使用CSS？ 或者我应该坚持使用一类？

html css
10个回答
35
投票

从我可以告诉<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/

-9
投票

YES则存在默认内联的元素。

答案是span元素。

<span>
21
投票

是否有一个默认为inline-block？

严格地说，没有没有。 W3的HTML规范永远不要对任何元素指定默认的CSS属性值。他们确实提供了HTML 4 "default style sheet"，但开发商只鼓励使用它 - 它不是一个要求或任何形式的授权。在HTML 5个规范注明“典型的默认显示属性”但同样，那些不要求（也请记住，HTML 5仍然是一个工作草案反正）。

所以，离开所有默认值到浏览器，以及如何开发真正感受到元素应显示给用户。没有人能保证，特定元素将显示为inline-block或在别人的浏览器的任何其他方式。您应该始终明确设置，如果你希望它发生。不要依赖于“默认”。

如果不是，有什么特殊的标记名称将适合我申请“inline-block的”使用CSS？或者我应该坚持使用一类？

这是由你和你如何设计你的页面。你应该总是使用在语义上适当其中包含的内容元素。如果元素总会在上下文中，这将需要inline-block显示器中使用，通过各种手段将其设置为在样式表。否则，你将不得不求助于类或更具体的选择，以使您的内容正确显示。

7
投票

下面是得到默认的显示值对于大多数HTML标签的小提琴。

Fiddle

在铬，默认的内联块元素是："INPUT", "BUTTON", "TEXTAREA", "SELECT"

3
投票

原则上，这取决于浏览器什么的display属性的默认值是每个元素。即使HTML5的草案没有规定必须使用什么样的价值观，但它呈现CSS方面要素的“期望渲染”。

根据在CSS 2.1规范的default style sheet为HTML，已默认display: inline-block的元素button，input，select和textarea。浏览器使用这些设置，但在Firefox中，这仅适用于button和select。

在HTML5 CR的Rendering段，meter和progress元件还描述为具有内联块为“预期渲染”，并已实现了这些元素的浏览器显示的行为是那样。所述keygen元件也被描述为是内联块，但Firefox没有做到这一点（它实现keygen内部作为select在DOM）; IE不支持keygen可言; Chrome浏览器实现它的建议。

由于所有这些元素都具有相当专业的含义，功能和渲染idiosyncracies，他们都不是足够的，因为这是默认的内联块，并且可以具有不同含义的元素一般用途。你可以使用这样的元素，通常span或div，这取决于你是否喜欢inline或block作为默认渲染。

3
投票

您可以检查我的codepen与所有的HTML元素，并默认其display财产。有些标签是语法打破，但不要紧，我们的目的。

目前，有5种元素，其FF display: inline-block：

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

和另外2（包括上面5）中铬：

  1. textarea
  2. input
1
投票

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

倘若你想inline-block一个div你想给它一个类名。

.inline-block {
    display: inline-block
}

然后...

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

更正

我错了约img。这似乎默认为inline而不是inline-block

1
投票

现在，您可以创建自定义元素（例如：<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>
1
投票

我对这个解决方案是宣布我称之为slice。

CSS

sl {
    display: inline-block;
}

用法

<sl>inline block stuff</sl>
0
投票

这是不是一个真正的真正答案的问题的权利，但有足够的支持，它可能有一天会。

<seg>简称“段”。作中，一条线的片段。

与填充工具：

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

对，我知道这样的元素，它真的会很好，如果有一个正式的一个，但没有，所以这里是最好的（IMO）建议的名称。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.