html - 如何让 CSS 正确对齐标题​​？

Question

目前，当代码运行时，我的两个标题字段都出现在同一个表格上方。它还将除第一个字母外的所有字母小写。我想在每张 table 上方都有一个标题。主要代码看起来像，

<%= form_for(@test) do |f| %>
  <div id="field">
      <%= f.label "test" %>
      <%= f.text_field :test_title %><br>
  </div>    
  <div id="field">
      <%= f.label "Description" %>
      <%= f.text_area :description %><br>
  </div>
  <div class="actions">
    <br><%= f.submit %><br>
  </div>    
  <div id="title">
      <%= f.label "Associated worlds" %><br><br>
  </div>
  <div id="add_fields">
      <%= link_to_add_fields "Associate New world", f, :pwss_wbss %><br><br>
  </div>    
  <div id="fields">
      <% if @test.valid? %>
        <table id="sort_table" class="display">
            <thead>
                <tr>
                    <th>Line Item</th>
                    <th>Description</th>
                    <th>Remove</th>
                </tr>
            </thead>
            <tbody>
                <% if @test.valid? %>
                  <%= f.fields_for :tests_worlds, @test.tests_worlds.each do |builder| %>
                    <%= render "tests_world_row", f: builder %>
                  <% end %>
                <% end %>
            </tbody>
        </table>
      <% end %>
  </div>

  <div id="title">
      <%= f.label "States" %><br><br>
  </div>

  <div id="add_fields">
    <% if @test.valid? %>
      <%= f.fields_for :state, @test.states.each do |builder| %>
        <%= render "states_fields", f: builder %>
      <% end %>
    <% end %><br>
  </div>

  <div id="add_fields">
      <%= link_to_add_fields "Add State", f, :state %>
  </div>

  <div id="fields">
      <% if @state.valid? %>
        <table id="sort_table" class="display">
            <thead>
                <tr>
                    <th>Line Item</th>
                    <th>Description</th>
                    <th>Remove</th>
                </tr>
            </thead>
            <tbody>
                <%= f.fields_for :states, @test.states.each do |builder| %>
                  <%= render "states_row", f: builder %>
                <% end %>
            </tbody>
        </table>
      <% end %>
  </div>
<% end %>

我在标题字段中使用的 CSS 代码是:

div#title label {
    display: inline-block;
    padding: 0px,5px,0px,5px;
    min-width: 80px;
    font-size: 14pt;
    color: Blue;
    font-weight: bold;
}
div#title {
    position: static;
    display: inline-block;
}

运行时，两个标题都显示在两个表上方的一行中。如何获得标题，以便每个标题都出现在相应表格的上方？

这是它显示的图像

Answer 1

如果您打算将标题用作标签，请将其设置为类而不是 HTML 中的 Id。 ID 应该在任何页面中只出现一次。

此外，它可能与仅在标题上显示为内联 block 有关。如果其他元素不是 inline-block，它们可能会以不同的顺序呈现。

我倾向于对几乎整个页面使用 inline-block。尝试将容器 div 或主体的值设置为 inline-block，看看是否有帮助。