“使用 html5 和 css3 的响应式网页设计”中的 inline 和 inline-block 区别答案

【问题标题】：inline and inline-block difference in "responsive web design with html5 and css3"“使用 html5 和 css3 的响应式网页设计”中的 inline 和 inline-block 区别
【发布时间】：2015-07-26 22:20:05
【问题描述】：

我在阅读“使用 HTML5 和 CSS3 的响应式网页设计”Chapter3 Fluid Layouts 时遇到了这个问题。作者试图将固定像素大小更改为基于百分比的流体大小。下面是html和css代码。

html:

<div id="wrapper">
<div id="navigation">
  <ul>
    <li><a href="#">something</a></li>
    <li><a href="#">some other thing</a></li>
  </ul>
</div>

css:

#navigation ul li{display:inline-block;}
#navigation ul li a {margin-right:25px;}

假设最外面的#wrapper 是 940 像素宽度。作者天真地展示了将 margin-right 从 25px 更改为 2.66%(25/940) 不起作用，因为 <a> 的中间父级是 <li>，没有给定特定的宽度。

除了作者建议的解决方案，作者还提供了另一种解决方案，将“display:inline-block”改为“display:inline”。

虽然我可以在一定程度上理解 inline 和 inline-block 之间的区别，但是感谢 StackOverflow 的这两个段落（1,2），我不知道它在这种情况下究竟是如何工作的。

我猜 inline 的东西不能互相贴近，但是 inline-block 可以。对吗？

感谢您的任何建议。谢谢！

【问题讨论】：

小心将li 设置为inline-block，它不能很好地与一些旧版本的IE 配合使用。最好使用inline，然后将此后代a 设置为inline-block。

标签： javascript html css web responsive-design

【解决方案1】：

    **Inline elements:**

    1.respect left & right margins and padding, but not top & bottom
    2.cannot have a width and height set
    3.allow other elements to sit to their left and right.

    **Block elements:**

    1. respect all of those
    2. force a line break after the block element

   **Inline-block elements:**

    1.allow other elements to sit to their left and right
    2.respect top & bottom margins and padding
    3. respect height and width

  refer:  https://jsfiddle.net/khbk3o2s/1/

【讨论】：

【解决方案2】：

percentage margins 的定义说

百分比是相对于生成框的包含块的宽度计算的。

生成的盒子是a元素的盒子，它的containing block是它最近的块容器祖先。

inline-block 元素是块容器，所以当li 元素是inline-block 时，它是a 元素的包含块，边距是li 宽度的百分比元素。

此外，inline-block 元素的收缩适应特性会产生循环依赖。边距取决于li 元素的宽度，li 元素的宽度取决于a 元素的边距。在这种情况下，调整边距以解决这种情况是正常的，在这种情况下，将它们设置为 0。

内联元素不是块容器，所以当li元素内联时，ul元素是a元素的包含块，边距是ul的宽度百分比元素，与#wrapper元素的宽度相同。

【讨论】：