使用jQuery或JavaScript设置inline-block CSS

Question

基于@Bergi的示例jsfiddle.net/CH9K8/1321/
下面的代码很好地工作：

#center{
display:inline-block;
}

但是如果我尝试这样做，在Chrome和Safari中就无法正常工作。

$('#center').css('display','inline-block');

nor

document.getElementById('center').style.display='inline-block';

有什么解决办法吗？谢谢。

编辑... 现在我明白你为什么说它工作正常了。我已经在Chrome（v30）和safari v5.1中尝试过，但不起作用...但是在Explorer，Firefox和Opera中可以使用。那么现在的问题是...有没有Chrome和Safari的解决方案？

- MTK

---

为什么不直接使用CSS呢？ - Bergi

可能是重复的问题：为什么jQuery或者像getElementById这样的DOM方法找不到元素？ - Bergi

哦，关于你的fiddle：你正在加载Mootools；你是否实际上已经包含了jQuery库？ - Bergi

@bergi。感谢您的询问，但不是这个问题。元素已被找到（我已经测试了其他CSS属性并且可以工作）...这个fiddle示例不是我的...我已经尝试过使用jQuery。 - MTK

@Timo 无论你是通过js设置样式还是不设置，你都必须学习css才能进行样式设计。 - Bergi

Answer 1

$('#center').css('display','inline-block');

正如PHPglue先前所述，这个方法可以正常工作（当你将fiddle设置为使用jquery而不是Mootools时），右侧div未显示在一行的问题是由于您同时使用了float和display-inline属性导致的，它们实际上并不兼容。

- Carl Wilson

Answer 2

如果你正在使用jQuery，$('#center').css('display', 'inline-block'); 是有效的。请参阅：http://jsfiddle.net/CH9K8/1320/。将其更改为block，然后恢复。

- StackSlave

Answer 3

Pure JS代码展示如何使用block-inline：

    withElem = document.querySelector('#withSpace')
    withoutElem = document.querySelector('#withoutSpace')
    btn1 = document.createElement('button')
    btn1.textContent = 'element1'
    btn2 = document.createElement('button')
    btn2.textContent = 'element2'
    btn3 = document.createElement('button')
    btn3.textContent = 'element1'
    btn4 = document.createElement('button')
    btn4.textContent = 'element2'

    spn = document.createElement('span')
    spn.style.display = 'inline-block'
    // Get a spacer of 20px:
    spn.style.width = '20px'
    //Append it to another node
    withElem.append(btn1, spn, btn2)
    withoutElem.append(btn3, btn4)

<div id=withSpace></div><br>
<div id=withoutSpace></div>

: spn.style.width = '20px' //将其附加到另一个节点 parentElem.appendChild(spn)

- Timo