同じ行のHTML、CSS上のすべての要素を取得する方法

Question

私の画面は次のようになります。

は、私はすべてが同じ行になりたいです。これをどうやって解決するのですか？私のhtmlコード：

.form-box 
     %h3 Restrictions 
     %legend Restricted Locations 
     %fieldset.restrictions-row 
     .restrictions-row.restrictions-label 
      = label_tag :us_states, "US States" 
     .restrictions-row.restrictions-select 
      = collection_select :restriction, :category, Restriction.where(category: "US State"), :id, :name, prompt: true 
      = hidden_field_tag :product_id, @wine.product.id 
      = hidden_field_tag :restriction_category, "US State" 
     .restrictions-row 
      = button_tag "Add", class: 'btn btn-primary' 
     %table.table.table-hover.table-condensed.story-list.restrictions-row 
      %th{ style: 'padding: 3% 17%' } State 
      %th{ style: 'padding: 3% 17%'} Remove 

私のCSS：

.restrictions-label { 
    width: 10%; 
    font-weight: bold; 
    } 
    .restrictions-select { 
    width: 10%; 
    } 
    .restrictions-row { 
    display: inline-block; 
    } 

優先さを取っていますか？私がdivにそれを適用すると、ボーダーラインが動作しないのはなぜですか？

Answer 1

親だけでなく、インラインで実行する必要があるすべての要素にinline-blockを追加する必要があります。たとえば、テーブルはdisplay: tableです。あなたはそれもinline-blockにする必要があります。

.table { 
    display: inline-block; 
} 

Answer 2

fieldset.restrictions-row > .restrictions-row{ 
    display: inline-block; 
    width: auto; 
} 

これは、あなたがいつもの例で述べたようなコードが動作です。

上記のコードで達成できない場合は、floatを使用できます。その後、浮動小数点をクリアすることができます。

fieldset.restrictions-row > .restrictions-row{ 
    float:left; 
} 
fieldset.restrictions-row::after{ 
    content:""; 
    display:block; 
    clear: both; 
}