div 继续显示为块而不是内联块答案

【问题标题】：Divs keep on displaying as block and not inline blockdiv 继续显示为块而不是内联块
【发布时间】：2015-11-24 21:09:30
【问题描述】：

我正在尝试将<div class="project-list"> 变为inline-block，但它不断恢复为block。

.project-list {
width:20%;
display:inline-block; }


$(document).ready(function () {
    $('#one').delay(1300).fadeIn(1000);
    $('#two').delay(1500).fadeIn(1000);
    $('#three').delay(1700).fadeIn(1000);
    $('#four').delay(1900).fadeIn(1000);
    $('#five').delay(2100).fadeIn(1000);
    $('#six').delay(2300).fadeIn(1000);
    $('#seven').delay(2500).fadeIn(1000);

});

http://jsfiddle.net/w58L2dn0/

【问题讨论】：

标签： jquery css

【解决方案1】：

您有一个相当复杂的设置，那么为什么不直接执行它们以省略 id 呢？我也简化了他的 CSS：

var showem2 = function (me, mydelay) {
    return $(me).delay(mydelay).css('display', 'inline-block').hide().fadeIn(1000);
}
$(document).ready(function () {
    $(".project-list").each(function (i) {
        showem2($(this), 500 * (i + 1));
    });
});

示例：http://jsfiddle.net/MarkSchultheiss/w58L2dn0/7/

【讨论】：

【解决方案2】：

在您的 html 中，您有 style="display: block"。在 HTML 中，我们有 3 种方式在页面上插入 CSS：

外部样式表
内部样式表
内联样式

您的style="display: block" 是内联样式表，并且此样式会覆盖所有外部样式表和内部样式表。反过来，内部覆盖只是外部样式表。并且 external 不会覆盖任何内容。

您在同一标签中还有id 和class。例如，让我们将div 与id="three" 一起设置，您可以将display: none 设置为它。那么id 比class 更强大，你的id 属性会覆盖class 属性。

阅读更多关于将 CSS 添加到 HTML here。

【讨论】：

这个答案并不完全正确。大概 OP 不知道他的内联样式是由 jQuery 自动创建的，我认为这是这里问题的核心。如果将外部样式表放在文档的<head> 下方，则外部样式表确实可以覆盖内部样式表（尽管我通常不会看到它在野外发生）。作为旁注，我认为您的意思是 id="three" 而不是 id="#three"。
@MaximillianLaumeister 是的，我的意思是 id="three"，谢谢。但他只是问他为什么没有display: inline-block，我解释了为什么他把它放在风格上，但它并不适用。

【解决方案3】：

这是因为你使用了fadeIn来显示div，你可以使用2个解决方案：

$('#one').delay(1300).css({
        opacity: 0,
        display: 'inline-block'     
    }).animate({opacity:1},600);

http://jsfiddle.net/lTasty/w58L2dn0/5/
或

$('#one').delay(1300).fadeIn(1000).css("display","inline-block");

http://jsfiddle.net/lTasty/w58L2dn0/2/

【讨论】：

为什么fadeIn会导致问题？
因为淡入淡出强制显示阻塞
第一个解决方案是最好的。 :) 谢谢。

【解决方案4】：

默认情况下，jQuery show display:block 你可以通过在 jQuery .css("display", "inline-block") 中添加 CSS 规则来覆盖它

$(document).ready(function () {
    $('#one').css("display", "inline-block").delay(1300).fadeIn(1000);
    $('#two').css("display", "inline-block").delay(1500).fadeIn(1000);
    $('#three').css("display", "inline-block").delay(1700).fadeIn(1000);
    $('#four').css("display", "inline-block").delay(1900).fadeIn(1000);
    $('#five').css("display", "inline-block").delay(2100).fadeIn(1000);
    $('#six').css("display", "inline-block").delay(2300).fadeIn(1000);
    $('#seven').css("display", "inline-block").delay(2500).fadeIn(1000);
});

Fiddle

【讨论】：

您的代码框在延迟和淡入之前可见，因为您删除了 Display:none
@LTasty 有什么问题？

【解决方案5】：

这是一个 jquery 问题。 fadeIn（和 show 等）将显示设置为内联 css。例如。元素在显示时获取 style="display:block"。请参阅How to fade to display: inline-block，了解有关如何构建自己的动画以将 inline-block 作为显示的详细信息。

【讨论】：