一行中的多个div id不显示内联

Question

我遇到的问题是在最后一行中将以下div与城市，州和邮政编码放在一行中。我添加了一个css类，其显示设置为内联，但它不起作用或我尝试过的任何其他内容。有什么我做错了。这似乎是一个非常简单的修复，但它并没有像那样。

＆＃13;

＆＃13;

.confirmshippinginfo {
  float: right;
  display: inline-block;
  margin-right: 120px;
  font-size: .75em;
}
.confirmshippinginfoinline {
  display: inline;
}

＆＃13;

<div class="confirmshippinginfo">
  <span class="spanmediumfontbold"><p>Shipping to:</p></span>
  <p>
    <div id="name">John Smith</div>
  </p>
  <p>
    <div id="address1">101 Main St</div>
  </p>
  <p>
    <div id="address2">APT #2</div>
  </p>
  <div class="confirmshippinginfoinline">
    <div id="confirmcity">New York</div>,
    <div id="confirmstate">NY</div>
    <div id="confirmzip">11201</div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要使内联div的子项显示为内联。否则，您只是在内联元素中绘制块元素。

.confirmshippinginfo {
  float: right;
  display: inline-block;
  margin-right: 120px;
  font-size: .75em;
}
.confirmshippinginfoinline div {
  display: inline;
}

<div class="confirmshippinginfo">
  <span class="spanmediumfontbold"><p>Shipping to:</p></span>
  <p>
    <div id="name">name</div>
  </p>
  <p>
    <div id="address1">address1</div>
  </p>
  <p>
    <div id="address2">address2</div>
  </p>
  <div class="confirmshippinginfoinline">
    <div id="confirmcity">city</div>,
    <div id="confirmstate">state</div>
    <div id="confirmzip">zip</div>
  </div>

Answer 2

您需要执行以下操作

更新

.confirmshippinginfoinline {
  display: inline;
}

到

.confirmshippinginfoinline div {
  display: inline;
}

Answer 3

您使容器内联而不是您想要内联的div。看看对css的更改：

更改了行

.confirmshippinginfoinline div {
  display: inline;
}

完整代码段：

.confirmshippinginfo {
  float: right;
  display: inline-block;
  margin-right: 120px;
  font-size: .75em;
}
.confirmshippinginfoinline div {
  display: inline;
}

<div class="confirmshippinginfo">
  <span class="spanmediumfontbold"><p>Shipping to:</p></span>
  <p>
    <div id="name">John Smith</div>
  </p>
  <p>
    <div id="address1">101 Main St</div>
  </p>
  <p>
    <div id="address2">APT #2</div>
  </p>
  <div class="confirmshippinginfoinline">
    <div id="confirmcity">New York</div>,
    <div id="confirmstate">NY</div>
    <div id="confirmzip">11201</div>
  </div>