我在尝试区分水平菜单示例中display: block
和display: inline-block
之间的区别时遇到了一些问题。
我的小提琴:https://jsfiddle.net/4dg0ukk6/
以下几行代码是从上面提到的小提琴链接中提取的
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
我应该使用display: block
还是display: inline-block
?我看到的结果几乎是一样的。在这种情况下,它们之间究竟有什么区别?
答案 0 :(得分:2)
您注意到没有任何差异,因为您将该样式应用于父母中的单个孩子。
点击此处,我已将两个链接放在同一个li
内,注意
li a {
display: block;
和
li a {
display: inline-block;
答案 1 :(得分:1)
问题与您的a
元素不同,与li
元素一样。这是因为a
元素嵌套在li
元素中。
您的li
元素当前正在向左浮动,因此它们将彼此相邻排列。您对a
元素所做的任何更改只会影响它们在li
元素内部的显示方式。在你的情况下,除非每个a
内有多个li
元素,否则它并没有太大的区别。
如果您真的想知道事情是如何变化的,那么您将需要更改父li
元素的显示。因此,而不是以下代码:
li {
float: left;
}
尝试以下两个选项中的一个来查看差异:
li {
display: block;
}
或
li {
display: inline-block;
}
答案 2 :(得分:0)
带显示的元素:内联块就像显示:内联元素,但它们可以有宽度和高度。这意味着您可以在文本或其他元素中使用内联块元素作为块。
支持的样式与摘要的区别:
inline: only margin-left, margin-right, padding-left, padding-right
inline-block: margin, padding, height, width
答案 3 :(得分:0)
显示:阻止
当您使用display:block to li a 时,您可以在一行中拥有一对一
另一方面
显示:内联块 当您使用display:inline-block to li a 时,您可以在一行中拥有多个li