CSS内联不起作用答案

【问题标题】：CSS inline not workingCSS内联不起作用
【发布时间】：2013-10-31 18:07:36
【问题描述】：

我遇到了无法内联 HTML 元素的问题。我意识到这让人想起过去发生的问题，并且我可以使用诸如 float 之类的方法来使其工作，但我也想具体了解为什么 inline 不起作用。

这是一个 JS Fiddle - http://jsfiddle.net/K27nT/2/。页面不是 100% 的样子，但它显示了我的问题。

如果您向下看，您会看到一个链接“删除图片”。这应该符合Logo 和Select Image，但事实并非如此。我已经将 CSS 设置为显示元素 inline，但无论我做什么，它都不起作用。

出于测试目的，我确实将显示更改为inline-block，尽管在小提琴中工作，但在现实生活中仍然失败。我也确实将<a> 元素更改为<span>，只是为了看看发生了什么，但这也失败了。因此，我相信我的问题是在此元素之前引起的，但我不知道是什么原因造成的。

谁能告诉我为什么inline 在这种情况下不起作用？谢谢。

作为仅供参考，这是页面实际外观的图像 -

【问题讨论】：

为什么不直接使用inline-block，因为它是块级元素。jsfiddle.net/PxJC5
是的，默认情况下每个元素都已经显示：内联； inline-block 应该是你的解决方案，只是要小心，因为 inline-block 对空白很敏感，如果你的 magins 关闭使用 float
我看到它在你的小提琴中起作用，但在我的情况下它也不起作用（我在发布之前尝试过）。此外，不管 <a> 是块级元素，我不需要它的任何块级属性，所以理论上 surly inline 应该可以工作吗？
@JoshC - 我想我可能拥有它。即使认为包装Select Image 的<div> 是inline，其中还有另一个<div> 不是。我的理解是 inline 是基于父母的，但显然孩子在这种情况下搞砸了！
@JoshC - 是的，我现在和你在一起。去回答吧。

【解决方案1】：

这仅仅是因为元素之间还有一个div。在这种情况下.loading-dd-options

您可以通过将其设置为inline 元素来解决此问题，因为默认情况下它是block 级别元素。

.loading-dd-options {
    display: inline;
}

或者，您也可以将元素设置为inline-block，效果相同。

【讨论】：

【解决方案2】：

“选择图像”-div 中的div.loading-dd-options 仍设置为display:block 并强制换行。每个带有display:block 的元素都从下一行开始并使用其父元素的整个宽度，即使它是空的。

【讨论】：