如何防止内联列表元素的边被HTML切断？

Question

我对内联列表元素有疑问。

问题在于，当我限制包含内联列表元素的菜单的宽度时，将其放在多行（对于移动设备）时，元素的右侧将被切断。

这是一个JSFiddle，显示了这个：http://jsfiddle.net/vk2bK/7/

橙色的菜单：

width: 210px;
background-color: #ffc20e;

在这个JSFiddle中，第二个列表元素的右侧被截断。在div的旁边有很多空间和菜单“菜单”，所以不是因为这个原因。我认为这是因为某些内联列表属性我不知道。

当列表扩展到第二行时，如何防止内联列表元素的右侧被切断？

Answer 1

简单的CSS修复应该这样做。

您需要修改li元素，使它们是具有已定义宽度的内联块：

.menu li {
    display: inline-block;
    width: 90px;
}

请在此处查看：http://jsfiddle.net/vk2bK/21/

---

修改

我玩弄它，看看这是否是你想要的：http://jsfiddle.net/vk2bK/22/

Answer 2

好的，我找到了一个解决方案：JsFiddle

    .menu a {
    display: inline-block;
}

.menu a {
    width:80px;
    background-color: #7dc242;
    line-height: 30px;
    margin: 3px;
}

我删除了列表并使所有元素内联块你可以根据需要编辑它们的宽度和高度。