css - 内联显示两个 div。为什么显示:inline have to be in the nested div?

Question

这是我的CSS:

#help-someone {
  font-size: 16px;
  text-align: center;
  margin: auto;
  width: 800px;
  padding: 0.7em;
}

#complete-loan {
  font-size: 20px;
  text-decoration: underline;
  display: inline-block;
}

这是我在 application.html.erb 中的代码

<% if pending_loans.present? %>
      <div id="help-someone" class="alert alert-success">Help someone today and <div id="complete-loan"> <%= link_to "complete your loan", pending_loan_path %>.</div></div>
<% end %>

所以这行得通。它像我想要的那样内联渲染。但我最初认为 display:inline-block 应该在 help-someone id 而不是嵌套 id 中。这是为什么？

此外，margin auto 是将我的整个 div 框居中的最佳方式吗？

Answer 1

回答您的问题:

1. 显示内联 block 需要放在complete-loan 元素中，否则它会显示为 block 级元素。您也可以将其应用于 #help_someone id，但这不是必需的。

内联 block 允许容器内联显示，但使用 block 级属性进行格式化。

1. margin auto 是使整个 div 框居中的最佳方式。