为什么 <li> 下的元素 <div> 呈现不同于 <li> 下的元素 <ul> ？

Question

i want to temporarily place a li element under a div but i have noticed that the element renders differently even when the div parent is styled exactly as the original ul parent. any reason for this behaviour? any way to emulate the ul tag with a div tag?

 function copy(){ var ul = document.getElementById ('real-ul'); var div = document.getElementById('emulate-ul'); var cStyle = (window.getComputedStyle) ? window.getComputedStyle(ul, null) : ul.currentStyle; for(var property in cStyle){ div.style[property] = cStyle[property]; } } 

 <div> <div id="emulate-ul"> <li>ITEM li under a div</li> </div> <ul id="real-ul"> <li>ITEM li under a ul</li> </ul> </div> <button onclick="copy()"> copy all computed styles </button> 

Answer 1

The ul element has a few default css props in most browsers, I think this is an accuarate list:

ul { 
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

You can see that the margin before and after and the padding-start are causing the difference here. I suppose you could add them to your bounding div to recreate the styling of a ul .

Answer 2

You don't put <li> elements inside <div> without <ul> This is how you could put it:

<div>
  <div id="emulate-ul">
    <ul>
     <li>ITEM li under a div</li>
    </ul>
  </div>
  <div id="some-id">
   <ul id="real-ul">
     <li>ITEM li under a ul</li>
   </ul>
  </div>
</div>