Question

的test.html ：

div, li {
  display: inline-block;
  margin-left: 30px;
}

<div>тест1</div>

<ul>
  <li>тест</li>
</ul>

打开test.html会产生这样的结果：尽管div和li标签共享相同的样式规则，但div标签内容仍然比li标签更接近左侧屏幕边框（至少在Google Chrome 44，桌面上）。为什么会这样，它是如何“愈合”的？

Answer 1

In [1]: a = 1234 In [2]: a.to_bytes(2, 'big') Out[2]: b'\x04\xd2' In [3]: b = bytearray(a.to_bytes(2, 'big')) In [4]: b[0] Out[4]: 4 In [5]: b[1] Out[5]: 210在默认css中有左边距。你可以reset css，或者只是加入<ul> <ul>和margin: 0;。

Answer 2

HTML元素的样式规则超出了简单的左边距和＆amp;显示类型（例如填充）。元素也相对于其他元素定位（除非另有明确设置）。

您的<div>＆amp; <li>看起来完全相同。

Answer 3

现在你对两者都有同样的效果：

div, li{
  display: inline-block;
  margin-left: 30px;
}
ul {
    margin:0;
    padding:0;
}

这是小提琴：http://jsfiddle.net/nphzbfwd/1/

Answer 4

根据@Alesha Oleg的答案发布完整代码 -

＆＃13;

<!DOCTYPE html>

<style>
div, li
{
  display: inline-block;
  margin-left: 30px;
}  
ul
{
  margin: 0;
  padding: 0;
}
</style>

<div>ABCD</div>

<ul>
  <li>ABCD</li>
</ul>

＆＃13;

应用于div和li标签的相同样式规则会产生不同的结果

4 个答案: