如何获取同一行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;
}