为什么UL比DIV宽，即使两者都设置为相同的宽度？

Question

HTML code：

<div>Foo</div>
<ul>
    <li>Bar</li>
</ul>

CSS：

div {
    width: 50%;
    border: 1px solid blue;
}

ul {
    width: 50%;
    border: 1px solid green;
}

JSFiddle

两个问题：

1. 为什么ul宽于div虽然两者都设置为相同的宽度？
2. 如何修复此代码，使ul和div具有相同的宽度？

Answer 1

因为你需要知道默认的盒子模型是如何工作的。默认情况下，padding，border空格被视为元素之外，因此它会累计到您的总元素width。

^{图片来源：w3c Box model#Box Dimensions}

如果你有一个元素说，100px的宽度，你的边框为2px，边长为20px，那么你的元素总大小将是100 + 4px（每边2px）+ 40px（20px的填充在每一边），总宽度达144px。

你如何解决这个问题？

你需要改变你的盒子模型，

* {
  box-sizing: border-box;
}

这件事情的作用是，通过将border-box设置为box-model值，它会计算元素内部的padding和border而不是外部。因此，元素的总width保持不变。

  

请注意*会修改所有元素的box-model，所以你   如果要更改框模型，也可以使用ul或class名称   仅限特定元素。

Demo

或者你需要重置padding元素的默认^{参考＃1（我的答案结尾）} ul

ul {
  padding-left: 0;
}

Demo（请注意，子弹不再存在，所以......）

使用li

轻推margin

ul li {
  margin-left: 20px;
}

Demo

或者您可以在list-style-position: inside;元素上使用ul。

Demo

  

注意：如果有的话，使用list-style-position确实有不利之处   多行，这将导致你的子弹下面的换行   所以请继续margin-left，我可以在这里介绍太多东西   但是我不想偏离我的实际答案。

＃1 padding来自哪里？

每个浏览器都有自己的默认样式表，我们也称之为用户代理样式表。当网页没有定义其他样式时，将应用此样式表。所以每个浏览器都有它自己的风格，可能会有所不同，因此我们使用reset.css或normalize.css或一个方便的星级声明来重置样式，如

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box; /* alters box model */
}

Answer 2

检查<ul>和<div>的方框模型，很明显<ul>有一个额外的左边填充。此默认填充来自用户代理的默认样式表 - 可能因浏览器而异。

padding: 0上的<ul>样式应该修复它。您可能还想考虑使用normalize.css，它可以在各种浏览器中更加一致地呈现所有元素。

<ul>

的框模型

<div>

的框模型

div {
  width: 50%;
  border: 1px solid blue;
}
ul {
  padding: 0;
  width: 50%;
  border: 1px solid green;
}

<div>
  Foo
</div>

<ul>
  <li>Bar</li>
</ul>

Answer 3

1. 默认情况下，padding-left元素有ul个。
2. 从ul移除填充或设置* {box-sizing: border-box;}

div {
  width: 50%;
  border: 1px solid blue;
}
ul {
  width: 50%;
  border: 1px solid green;
  padding-left: 0;
}

<div>
  Foo
</div>
<ul>
  <li>Bar</li>
</ul>

* {
  box-sizing: border-box;
}
div {
  width: 50%;
  border: 1px solid blue;
}
ul {
  width: 50%;
  border: 1px solid green;
}

<div>
  Foo
</div>
<ul>
  <li>Bar</li>
</ul>

Answer 4

UL有填充缩进它。如果在UL上将填充设置为0，则它​​们的宽度都相同。

这是另一篇文章，详细解释了如何修复它

Floating two 50% width divs with a 10px margin between