html - 如何使用 "div"和 "css"重组页面？

Question

我不确定如何将带有红色矩形中的蓝色按钮的搜索字段移动到“Поиск мероприятий:”标签的右侧？

代码如下:

<style>
    #header {
        border: 4px solid red;
        background-color:white;
        color:black;
        text-align:left;
    }
    #nav {
        border: 4px solid green;
        line-height:20px;
        height:420px;
        width:250px;
        float:left;
        padding:5px;          
    }
    #section1 {
        border: 4px solid blue;
        width:700px;
        float:left;
        padding:5px;         
    }
    #section2 {
        border: 4px solid brown;
        background-color: gainsboro;
        width:700px;
        float:right;
        padding:5px;         
    }
</style>

<div id="header">
    <h2>Поиск мероприятий:</h2>
    <div id="searchKeyword" class="input-group">
        <i class="glyphicon glyphicon-search input-group-addon"></i>
        <input type="text" class="form-control" placeholder="Часть названия мероприятия" ng-model="actionsQuery.searchText" on-enter="queryResult()">
        <!--<span class="input-group-btn" ng-hide="!actionsQuery.searchText">-->
        <span class="input-group-btn">
            <button class="btn btn-primary" type="button" ng-click="queryResult()">Найти мероприятия</button>
        </span>
    </div>
</div>

<div id="nav">
    ...
</div>

<div id="section1">
    ...
</div>

<div id="section2">
    ...
</div>

Answer 1

使用 CSS display: inline-block

#header h2, #searchKeyword{
       display:inline-block;
    }  

#header {
        border: 4px solid red;
        background-color:white;
        color:black;
        text-align:left;
    }
    #header h2, #searchKeyword{
       display:inline-block;
    }
    #nav {
        border: 4px solid green;
        line-height:20px;
        height:420px;
        width:250px;
        float:left;
        padding:5px;          
    }
    #section1 {
        border: 4px solid blue;
        width:700px;
        float:left;
        padding:5px;         
    }
    #section2 {
        border: 4px solid brown;
        background-color: gainsboro;
        width:700px;
        float:right;
        padding:5px;         
    }

<div id="header">
    <h2>Поиск мероприятий:</h2>
    <div id="searchKeyword" class="input-group">
        <i class="glyphicon glyphicon-search input-group-addon"></i>
        <input type="text" class="form-control" placeholder="Часть названия мероприятия" ng-model="actionsQuery.searchText" on-enter="queryResult()">
        <!--<span class="input-group-btn" ng-hide="!actionsQuery.searchText">-->
        <span class="input-group-btn">
            <button class="btn btn-primary" type="button" ng-click="queryResult()">Найти мероприятия</button>
        </span>
    </div>
</div>

<div id="nav">
    ...
</div>

<div id="section1">
    ...
</div>

<div id="section2">
    ...
</div>

或使用float - CSS

#header h2, #searchKeyword{
   float:left;
}

#header {
    border: 4px solid red;
    background-color:white;
    color:black;
    text-align:left;
    overflow: auto;
}
#header h2, #searchKeyword{
   float:left;
}
#searchKeyword{
   line-height:64px;
}
#nav {
    border: 4px solid green;
    line-height:20px;
    height:420px;
    width:250px;
    float:left;
    padding:5px;          
}
#section1 {
    border: 4px solid blue;
    width:700px;
    float:left;
    padding:5px;         
}
#section2 {
    border: 4px solid brown;
    background-color: gainsboro;
    width:700px;
    float:right;
    padding:5px;         
}

<div id="header">
    <h2>Поиск мероприятий:</h2>
    <div id="searchKeyword" class="input-group">
        <i class="glyphicon glyphicon-search input-group-addon"></i>
        <input type="text" class="form-control" placeholder="Часть названия мероприятия" ng-model="actionsQuery.searchText" on-enter="queryResult()">
        <!--<span class="input-group-btn" ng-hide="!actionsQuery.searchText">-->
        <span class="input-group-btn">
            <button class="btn btn-primary" type="button" ng-click="queryResult()">Найти мероприятия</button>
        </span>
    </div>
</div>

<div id="nav">
    ...
</div>

<div id="section1">
    ...
</div>

<div id="section2">
    ...
</div>