水平菜单问题

时间:2017-09-29 15:06:29

标签: html css

我在尝试区分水平菜单示例中display: blockdisplay: 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?我看到的结果几乎是一样的。在这种情况下,它们之间究竟有什么区别?

4 个答案:

答案 0 :(得分:2)

您注意到没有任何差异,因为您将该样式应用于父母中的单个孩子。

点击此处,我​​已将两个链接放在同一个li内,注意

之间的区别
li a {
  display: block;

li a {
  display: inline-block;

Display: Block

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