水平菜单的问题

我在尝试区分水平菜单示例中的display: block和display: inline-block之间的区别时遇到了一些问题。水平菜单的问题

下面的代码行从小提琴链路提取上述

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 16px; 
    text-decoration: none; 
}

提到我应该使用display: block或display: inline-block？正如我所看到的结果几乎一样。在这种情况下，它们之间的区别究竟是什么？

来源

2017-09-29 DunDev

的可能的复制[什么是显示器的区别： inline and display：inline-block？]（https://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block） – Maharkus

删除'float：离开'并尝试切换它们，你可以看到差异......好吧，这里都产生相同的结果，我想这没关系:) – kukkuz

@Maharkus这个问题不是你发布的链接的重复。 OP似乎很熟悉两者之间的区别，但并不理解他为什么不能看到代码中的差异。看到我的答案，下面解决这个问题。 – kojow7

带显示的元素：内联块就像display：内联元素，但它们可以有宽度和高度。这意味着您可以将内嵌块元素用作块，同时将其在文本或其他元素中进行流动。

差异的支持样式作为总结：

inline: only margin-left, margin-right, padding-left, padding-right 
inline-block: margin, padding, height, width

来源

2017-09-29 15:10:39 Solomon

你注意到没有区别，因为你申请的是风格，以一个孩子家长里。

入住这里，我已经把两个环节同样li内，发现

li a { 
    display: block;

和

li a { 
    display: inline-block;

Display: Block

Display: Inline-block

来源

2017-09-29 15:10:57

我懂了！：D非常感谢！ – DunDev

显示器之间的差异：当您使用显示块

：块李一您可以在另一方面有一个在一个立在一排

显示：inline-block的 当您使用显示：inline-block的到李一可以有多个在一个立在一排

来源

2017-09-29 15:15:01 tushgraph

的问题与其说是与你的a因素，因为它与你的li元素。这是因为a元素嵌套在您的li元素中。

您的li元素当前正在浮动到左侧，因此会排成一排。您对a元素所做的任何更改只会影响元素在li元素内的显示方式。在你的情况下，除非每个li内有多个a元素，否则它并没有太大的区别。

如果你真的想看看事情如何改变，你会想要改变父li元素的显示。因此，而不是下面的代码：

li { 
    float: left; 
}

尝试这两个选项之一，看到了差距：

li { 
    display: block; 
}

或

li { 
    display: inline-block; 
}

来源

2017-09-29 15:15:10 kojow7

水平菜单的问题

回答

相关问题