html - CSS 在一个 div 旁边放置一个 div

Question

我想知道为什么我的 div 不在另一个 div 旁边？它不是将它们并排放置，而是放置在彼此下方，我不知道为什么要这样做。

.form-search #search {
    width: 485px;
}


.form-search #search #baaninput input {
    width: 240px;
    height: 123px;
    background-color: blue;
    float: left;
 
}

.form-search #search #plaatsinput input {
    width: 240px;
    height: 123px;
    background-color: green;
    float: right;
}


.form-search input {
    margin-top: -15px;
    margin-left: -15px;
    padding: 0px 5px;
    float: left;
    font: bold 15px "lucida sans","trebuchet MS","Tahoma";
    border: 0px none;
    background: none repeat scroll 0% 0% rgba(0,0,0,0);
}

.form-search button:before {
    content: "";
    position: absolute;
    border-width: 8px 8px 8px 0px;
    border-style: solid solid solid none;
    border-color: transparent #D83C3C;
    top: 18px;
    left: -6px;
}

.form-search button {
    left: 140px;
    margin-top: -40px;
    overflow: visible;
    position: relative;
    float: right;
    border: 0px none;
    padding: 0px ;
    cursor: pointer;
    height: 50p`x;
    width: 110px;
    font: bold 15px/40px "lucida sans","trebuchet MS","Tahoma";
    color: #FFF;
    text-transform: uppercase;
    background: none repeat scroll 0% 0% #D83C3C;
    border-radius: 0px 3px 3px 0px;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}

<form class="form-search">
                            <div id="search">
                            <div id="baaninput">
                                <fieldset>
                                    <input type="text" required="" placeholder="Baan naam hier...">
                                    </input>
                                </fieldset>
                            </div>

                            <div id="plaatsinput">
                                <fieldset>
                                    <input type="text" required="" placeholder="Plaats naam hier..."></input>
                                 </fieldset>
                            </div>

                            <button type="submit">
                                Zoeken
                            </button>
                             </div>



                        </form>

它应该有效吗？不知道为什么

感谢您花时间查看我的代码

问候， 约翰

Answer 1

您的字段集有 10 像素的填充(10 左和 10 右)，2 像素的边距(2 左和 2 右)和 2 像素的边框(2 左和 2 右)。 您输入的宽度为 240 + 您的填充、边距和边框为您提供了 270 像素的宽度。

2 个 270 像素的字段集总共为您提供 540 像素。为您的 .form-search #search 设置 540 像素而不是 485 像素的宽度，它们将彼此相邻 float 。