Question

我想暂时在 div 下放置一个 li 元素但我注意到，即使 div 父级的样式与原始 ul 父级完全相同，该元素的呈现方式也不同。这种行为的任何原因？是否可以使用 div 标记模拟 ul 标记？

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

ul元素在大多数浏览器中都有一些默认的css道具，我认为这是一个准确的列表：

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

您可以看到margin之前和之后padding-start造成了差异。我想你可以将它们添加到边界div以重新创建ul的样式。

Answer 2

如果没有<li>，您不会将<div>元素放在<ul>内。这就是您可以这样做的方式：

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

为什么<div>下的<li>元素与<ul>下的</div> </li> <li>元素不同？

2 个答案: