Html 如何使用css创建流体列表

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

CSS

ul{
列表样式类型：无；
}
ulli{
宽度：100px；
浮动：左；
边框：1px纯红；
利润率：10px；
}
.选定{
边框：3倍纯红；
}

HTML

一个
两个
三
四
四
四
四个
四
四
四
四

这就是我们所尝试的：

---

将此添加到css文件的顶部

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

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

编辑：

对不起，我误解了这个问题。像其他建议的一样，使用

display:inline block

或

display:inline

这样尝试：

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

---

使用

outline

而不是

border

ul li{
宽度：100px；
垂直对齐：顶部；/*此*/
显示：内联块；/*更重要的是*/
边框：1px纯红；
利润率：10px；
}

使用

显示：内联块而不是
浮动：左尽可能频繁。另外，添加
垂直对齐：top使它看起来很好

你有很多选择

第一个选项是在所选的
元素上使用大纲

第二个选项是在父元素上应用
框大小：边框框

第三个选项是在所选的
元素上使用
框阴影

就我个人而言，我会选择第三种选择


ul{
列表样式类型：无；
}
ulli{
宽度：100px；
浮动：左；
边框：1px纯红；
利润率：10px；
}
.选定{
长方体阴影：0 0px 3px红色
}

一个
两个
三
四
四
四
四
四
四
四
四
四
试试这个：


ul.selected{
列表样式类型：无；
宽度：100px；
浮动：左；
边框：1px纯红；
利润率：10px；
}

一个
两个
三
四
四
四
四个
四
四
四
四
仅限边框这是一个不错的选择，另一个选择是使用排列值（第四个像素值）的框阴影：0 0 3px#f00
。但对于更复杂的样式来说，这并不总是完全足够。是的，兼容性是支持
大纲的一个论据，这是正确的。
ul {list-style-type:none; 
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;}