内联显示两个div。为什么显示：内联必须在嵌套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 %>

所以这很有效。它像我想要的那样呈现内联。但我最初认为显示：inline-block应该在help-someone id而不是嵌套id中。这是为什么？

另外，margin auto是整个div盒中心的最佳方式吗？

Answer 1

回答你的问题：

1. 显示内联块需要进入complete-loan元素，否则它将显示为块级元素。您也可以将此应用于#help_someone ID，但不是必需的。

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

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