按钮显示内联 CSS [英] Button display inline CSS

问题描述

我有以下 CSS 和 HTML:http://jsfiddle.net/47w0h73r/6/

.one {填充:20px；背景:#f00；}.二 {填充:20px；背景:#00f；}一种，按钮 {字体系列:Arial、Helvetica；字体大小:16px；填充:10px；背景:#fff;颜色:#000；显示:内联；边框:0；文字装饰:无；}

<div class="one"></div><div class="two"><a href="#">链接</a><按钮>按钮</按钮>

您会注意到，该按钮并未显示为 inline.为什么是这样?谁能帮我把这个按钮inline，就像它的兄弟a一样?

问题

通过将 button 更改为 a 您会注意到 display: inline 使父元素的填充忽略填充两个子元素，使它们真正显示inline.问题在于 button 标签并没有真正内联出现，这使得父元素的填充将两个元素向下推.我该如何解决这个问题?

解决方案

这是我最近看到的关于尝试将按钮设置为 display:inline 的第二个问题，它似乎导致一些混乱.无法获得 display:inline 行为通常归因于它是替换元素，但这是不正确的， 不是替换元素.

实际上，HTML5 规范第 10.5.2 节中的按钮element 提出了这个要求:

<块引用>

当按钮绑定应用于按钮元素时，该元素为预期呈现为内联块"框呈现为按钮内容是元素的内容.

语言有点不寻常，但按钮绑定确实适用，效果是绑定优先于显示属性的指定值.效果是按钮始终呈现为 display:inline-block，无论其指定值是什么.您对此无能为力.

I have the following CSS and HTML: http://jsfiddle.net/47w0h73r/6/

.one {
  padding: 20px;
  background: #f00;
}
.two {
  padding: 20px;
  background: #00f;
}
a,
button {
  font-family: Arial, Helvetica;
  font-size: 16px;
  padding: 10px;
  background: #fff;
  color: #000;
  display: inline;
  border: 0;
  text-decoration: none;
}

<div class="one"></div>
<div class="two">
  <a href="#">Link</a>
  <button>Button</button>
</div>

As you will notice, the button doesn't appear as inline. Why is this? Can anyone help me put this button inline, just like its sibling a?

ISSUE

By changing the button to an a you will notice that the display: inline makes the padding of the parent element to ignore the padding of both child elements, making them really display inline. The problem, is that the button tag doesn't really appear inline, which makes the parent element's padding push both elements down. How can I fix this?

解决方案

This is the second question I've seen recently about the trying to set a button to display:inline and it seems to cause some confusion. The inability to get display:inline behaviour is often attributed to it being a replaced element, but that is incorrect, <button> is not a replaced element.

In fact, the HTML5 spec Section 10.5.2 The button element makes this requirement:

When the button binding applies to a button element, the element is expected to render as an 'inline-block' box rendered as a button whose contents are the contents of the element.

The language is a little unusual, but the button binding does apply, and the effect is that the binding takes precedence over the specified value of the display property. The effect is that the button is always rendered as display:inline-block, no matter what its specified value is. There is nothing you can do about it.

这篇关于按钮显示内联 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！