Question

我在阅读＆＃34;使用HTML5和CSS3响应网页设计时遇到了这个问题＆＃34;第3章流体布局。作者试图将固定像素大小更改为基于百分比的流体大小。下面是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宽度为940px。作者显示天赋变化保证金从25px到2.66％（25/940）不起作用，因为<a>的中间父亲是<li>，但没有给出具体的宽度。

除了作者建议的解决方案之外，作者提供了另一种解决方案，即改变＆＃34;显示：inline-block＆＃34;到＆＃34;显示：内联＆＃34;。

虽然我可以在一定程度上理解内联块和内联块之间的区别，但是由于这两个StackOverflow段落（1，2），我不知道它是如何工作的在这种情况下。

我想内联的东西不能彼此靠近，但是内联块可以。是吗？

我很感激任何建议。谢谢！

Answer 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/

Answer 2

percentage margins的定义说

百分比是根据生成的框的包含块的宽度计算的。

生成的框是a元素的框，其containing block是最近的块容器祖先。

内联块的元素是块容器，因此当li元素是内联块时，它是a元素的包含块，并且边距将是宽度的百分比li元素。

此外，内联块元素的缩小到适合性质会产生循环依赖性。边距取决于li元素的宽度，li元素的宽度取决于a元素的边距。在这种情况下，调整边距以解决此类情况是正常的，在这种情况下，将它们设置为0。

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

使用html5和css3＆＃34;响应式网页设计中的内联和内联块差异;

2 个答案: