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

Question

我在将最后一行中的以下 div 与城市、州和邮政编码放在一行中时遇到问题。我添加了一个显示设置为内联的 css 类，但它不起作用或我尝试过任何其他方法。我做错了什么吗？这似乎是一个很容易解决的问题，但结果并非如此。

.confirmshippinginfo {
  float: right;
  display: inline-block;
  margin-right: 120px;
  font-size: .75em;
}
.confirmshippinginfoinline {
  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>

Answer 1

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

.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>