使用 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

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

正如 PHPglue 先前所述，这很好用，（当您实际将小提琴设置为使用 jquery 而不是 Mootools 时）正确的 div 不显示内联的问题是由于您同时使用了浮动和显示内联属性，他们彼此并不真正兼容。

Answer 2

$('#center').css('display', 'inline-block'); 如果您使用 jQuery，则有效。 请参阅： http : //jsfiddle.net/CH9K8/1320/ 。 将其更改为block并返回。

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)