如何在同一行显示它们答案

【问题标题】：How to display them on same line如何在同一行显示它们
【发布时间】：2018-02-16 08:34:01
【问题描述】：

我试图在同一行显示 h4 和段落，但它不起作用。我试图让它们向左浮动，但没有任何改变

.offer {
  margin-left: 12%;
}

.offer h4 {
  background-color: #f25c25;
  display: table-cell;
  height: 120px;
  width: 120px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  color: #fff;
  transform: rotate(7deg);
}

<div class="offer">
  <div class="row">
    <h4>Offer<br/> Expires<br/> Oct. 31,<br/> 2015!</h4>
  </div>
  <p class="paragraph">Know someone who’s fed up with soaring bank fees and declining customer service? Celebrate your credit union and its value. Each new member strengthens the credit union and lets us return earnings to you with better rates and higher dividends along
    with stellar services. Plus, when you refer a new member, you each get $20.*</p>
</div>
</div>

【问题讨论】：

您的标记无效，您是否遗漏了代码中的复制粘贴内容？

标签： html css

【解决方案1】：

修复您的 HTML 并使用 flex:

.offer {
display:flex;
  align-items:center;
  margin:0 5%;
}

.offer h4 {
  background-color: #f25c25;
  flex:0 0 auto;
  display: inline-flex;
  justify-content:center;
  align-items:center;
  height: 120px;
  width: 120px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  transform: rotate(7deg);
  margin-right:20px
}

<div class="offer">
  <h4>Offer<br/> Expires<br/> Oct. 31,<br/> 2015!</h4>
  <p class="paragraph">Know someone who’s fed up with soaring bank fees and declining customer service? Celebrate your credit union and its value. Each new member strengthens the credit union and lets us return earnings to you with better rates and higher dividends along
    with stellar services. Plus, when you refer a new member, you each get $20.*</p>
</div>

【讨论】：

如果您支持旧版 IE 用户，请注意 flex，即
@JonP，确实，使用表格！

【解决方案2】：

同时创建.row 和.paragraph 内联块，将宽度设置和vertical-align: middle 应用于两者：

.offer {
  margin-left: 8%;
}

.offer h4 {
  background-color: #f25c25;
  display: table-cell;
  height: 120px;
  width: 120px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  color: #fff;
  transform: rotate(7deg);
}
.row {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
}
.paragraph {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

<div class="offer">
  <div class="row">
    <h4>Offer<br/> Expires<br/> Oct. 31,<br/> 2015!</h4>
  </div>
  <p class="paragraph">Know someone who’s fed up with soaring bank fees and declining customer service? Celebrate your credit union and its value. Each new member strengthens the credit union and lets us return earnings to you with better rates and higher dividends along
    with stellar services. Plus, when you refer a new member, you each get $20.*</p>
</div>

【讨论】：

【解决方案3】：

在您的情况下，您只需将p 标记移动到相同的div，并将p 标记设置为display: table-cell。

.offer {
  margin-left: 12%;
}

.offer h4 {
  background-color: #f25c25;
  display: table-cell;
  height: 120px;
  width: 120px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  color: #fff;
  transform: rotate(7deg);
}

.offer p {
  display: table-cell;
}

<div class="offer">
  <h4>Offer<br/> Expires<br/> Oct. 31,<br/> 2015!</h4>
  <p class="paragraph">Know someone who’s fed up with soaring bank fees and declining customer service? Celebrate your credit union and its value. Each new member strengthens the credit union and lets us return earnings to you with better rates and higher dividends along with stellar services. Plus, when you refer a new member, you each get $20.*</p>
</div>

【讨论】：