使用 jquery 或 javascript 设置内联块 css

Question

based on this example from @Bergi jsfiddle.net/CH9K8/1321/
the code below work fine:

#center{
display:inline-block;
}

but if I try this don't work in Chrome and Safari

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

nor

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

any solution? thanks.

EDIT ... ok now I understand why you say it work fine. I have tried it in Chrome (v30) and safari v5.1 And not work ... but yes it work In Explorer, Firefox, and Opera. So now the question is ... some solution for Chrome and Safari ?

Answer 1

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

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

Answer 2

$('#center').css('display', 'inline-block'); works if you're using jQuery. See: http://jsfiddle.net/CH9K8/1320/ . Change it to block and back.

Answer 3

Pure JS code to show the use of 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' //Append it to another node parentElem.appendChild(spn)