使用jquery或javascript设置内联块css

Question

基于@Bergi jsfiddle.net/CH9K8/1321/的这个例子 下面的代码工作正常：

#center{
display:inline-block;
}

但如果我尝试这个，则无法在Chrome和Safari中使用

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

，也不

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

任何解决方案？感谢。

编辑...... 好的，我现在明白为什么你说它工作正常。我在Chrome（v30）和safari v5.1中尝试过它并没有工作......但是它可以在资源管理器，Firefox和Opera中运行。所以现在问题是...... Chrome和Safari的一些解决方案？

Answer 1

如果你正在使用jQuery，

$('#center').css('display', 'inline-block');可以正常工作。见：http://jsfiddle.net/CH9K8/1320/。将其更改为block并返回。

Answer 2

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

这正如PHPglue先前所说的那样工作正常（当你实际设置小提琴使用jquery而不是Mootools时）右侧div不显示内联的问题是由于你同时使用了float和display-inline属性，他们彼此并不真正相容。

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)