CODEWITHSUNDEEP
htmlcss
Aquarius_Girl
Aquarius_Girl

Reputation: 22946

Arranging items next to each other inside one div tag in CSS

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;
}

This results in:

enter image description here

I want items inside TopMenu next to each other.

Upvotes: 0

Views: 62

Answers (1)

Roberto Vargas
Roberto Vargas

Reputation: 130

you can use display flex, and justify content to do that

.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

Upvotes: 1

Related Questions