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