Question

这是我所指的代码。

<div id="left" style="display: inline;">1</div>
<div id="right" style="display: inline;">
  <div id="inner">2</div>
</div>

我注意到#inner div元素仍然会有换行符，所以把#right和#inner放在#left之下。

我期待#left，＃right和#inner都在同一行，因为我将#left和#right标记为内联。似乎#inner可以看到它的父层，它旁边有#left元素，即使#inner真的在#right里面。

为什么浏览器会像这样？ 浏览器是否应该将范围分开，让#inner看不到外界？

Answer 1

#inner div仍显示为块。默认情况下，块会占用整行。从本质上讲，#inner div正在使其内联父级延伸，直到它出现＆＃34;到后者容器的左右边缘。这种行为是预期的。

不要将display #left和#right设为inline，而是将其设为inline-block。这个声明将使这些div围绕他们孩子的内容。

的小提琴

body > div {
    display: inline-block;
}

Answer 2

这种情况正在发生，因为#inner继承了所有div所具有的基本div样式display: block;。此样式来自浏览器在解释您的网站时生成的用户代理样式表（浏览器之间的解释可能不同）。因此，虽然它的父级使用显示内联，但不会被子元素继承。您可以使用开发工具并检查元素以查看此基本样式来确认：

div {
   display: block;
}

父div基本上塑造了孩子的形状，从而给你换行。

如果你需要解决方案：

您可以使用单独的样式表并使用display: inline;，如下所示：

的CSS：

div {display: inline;}

HTML：

<div id="left">1</div>
<div id="right">
  <div id="inner">2</div>
</div>

如果您不想包含外部样式表，可以将其包含在head标记中：

<head>
  <style>
    div {display: inline;}
  </style>
</head>

Answer 3

＆＃34;为什么浏览器的行为如此？＆＃34;

因为内部div元素仍然是块元素，所以默认情况下它从一个新行开始。

不是使用内联display:inline属性指定style=""样式，而是为这些元素添加一个类：

<div id="left" class="inline">1</div>
<div id="right" class="inline">
  <div id="inner">2</div>
</div>

...然后在样式表中定义具有该类和 div元素的两个元素，这些元素是该类的后代内联：

.inline, .inline div { display: inline; }

或者当然，如果您只是希望页面上的每个div都是内联的，那么您不需要class或style属性，您可以在样式表中执行此操作：

div { display: inline; }