Как получить CSS для правильного выравнивания названий?

Question

В настоящее время, когда код запускается, оба поля заголовка появляются над той же таблицей. Он также уменьшает регистр всех букв, за исключением первого. Я хотел иметь надпись над каждой таблицей. Основной код выглядит,

<%= 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

Если вы собираетесь использовать название в качестве тега, установите его как класс, а не Id в HTML. Идентификаторы должны появляться только один раз на любой странице.

Кроме того, это может иметь какое-то отношение к тому, что дисплей является встроенным блоком только на заголовках. Если другие элементы не являются также inline-block, они могут отображаться в другом порядке.

Я использую inline-block для целых страниц. Попробуйте установить значение div контейнера или тела на inline-block и посмотрите, поможет ли это.