如何使用css创建流控列表

Question

试图创建一个可调整的菜单列表，但在一个场景中，它失败了。在选择列表时，需要添加3px的边框，这将打破下面的列表。有谁能帮帮我吗。我需要所有的列表项目正确地对齐，如果边框增加。

CSS

ul {
    list-style-type:none;
}
ul li {
    width:100px;
    float:left; 
    border:1px solid red;
    margin:10px;
}
.selected{
    border:3px solid red;
}

<ul>
    <li class="selected"> One </li>
    <li> Two </li>
    <li> Three </li>
    <li> Four </li>
    <li> Four </li>
    <li> Four </li>
    <li> Four </li><li> Four </li>
    <li> Four </li>
    <li> Four </li>
    <li> Four </li>
    <li> Four </li>
</ul>

这就是曾经尝试过的：

演示列表链接

Answer 1

尝试像这样：演示

ul li {
 width:100px; 
 border:1px solid red;
 margin:10px; 
 display:inline-block; /*newly added and removed float property*/
 }

Answer 2

将其添加到css文件的顶部。

*,
*:before, *:after {
  box-sizing: border-box;
}

或者，在每个li元素周围添加一个2px的透明边框。他们已经有了1便士的边框。

编辑：

对不起，我误解了这个问题。和其他人一样，使用display: inline-block或display: inline。

Answer 3

使用outline而不是border。

http://jsfiddle.net/nw0q4z6z/