Размещение элементов рядом друг с другом внутри одного тега div в CSS

Question

HTML:

<div class = "TopMenu">

    <!-- Drop down list for "category" display options -->
    <div class ="DropDownLists" >
        <label> Categories </label>

        <select [formControl] = "selectedCategoryName" (click) = "onCategorySelected()" >
            <option *ngFor = "let category of this.getCategoriesFG.controls" >
                {{category.controls.name.value}}
            </option>
        </select>
    </div>

    <!-- Drop down list for "sort" options -->
    <div class = "DropDownLists">
        <label> Sort by </label>

        <select [formControl] = "mSelectedSortBy" (click) = "onSortBySelected()" >
            <option *ngFor = "let i of mSortByOptions" [ngValue] = "i.option">
                {{ i.option }}
            </option>
        </select>
    </div>

    <!-- Drop down list for "move to" options -->
    <div class = "DropDownLists">
        <label> Move to </label>

        <select [formControl] = "mSelectedCategoryNameMoveTo" 
                (click)     = "onMoveToSelected()">

            <option *ngFor = "let category of categories" [ngValue] = "category.name" >
                {{category.name}}
            </option>       

        </select>
    </div>

    <!-- Radio buttons for changing views 
         * name and formControlName have to have the same name-->
    <input type = "radio" name = "view" value = "gridView"  [formControl] = "view"> Grid View
    <input type = "radio" name = "view" value = "tableView" [formControl] = "view"> Table View

</div>

CSS:

.TopMenu
{
  background-color: pink;
  float: left;
  display: inline;
}

Это приводит к:

Я хочу, чтобы элементы в TopMenu располагались рядом друг с другом.

Answer 1

вы можете использовать гибкость отображения и выравнивать контент для этого

.TopMenu
{
  background-color: pink;
  float: left;
  display: flex;
  justify-content: around;
  margin-left: 10px;
}

<div class = "TopMenu">

    <!-- Drop down list for "category" display options -->
    <div class ="DropDownLists" >
        <label> Categories </label>

        <select [formControl] = "selectedCategoryName" (click) = "onCategorySelected()" >
            <option *ngFor = "let category of this.getCategoriesFG.controls" >
                {{category.controls.name.value}}
            </option>
        </select>
    </div>

    <!-- Drop down list for "sort" options -->
    <div class = "DropDownLists">
        <label> Sort by </label>

        <select [formControl] = "mSelectedSortBy" (click) = "onSortBySelected()" >
            <option *ngFor = "let i of mSortByOptions" [ngValue] = "i.option">
                {{ i.option }}
            </option>
        </select>
    </div>

    <!-- Drop down list for "move to" options -->
    <div class = "DropDownLists">
        <label> Move to </label>

        <select [formControl] = "mSelectedCategoryNameMoveTo" 
                (click)     = "onMoveToSelected()">

            <option *ngFor = "let category of categories" [ngValue] = "category.name" >
                {{category.name}}
            </option>       

        </select>
    </div>

    <!-- Radio buttons for changing views 
         * name and formControlName have to have the same name-->
    <input type = "radio" name = "view" value = "gridView"  [formControl] = "view"> Grid View
    <input type = "radio" name = "view" value = "tableView" [formControl] = "view"> Table View

</div