Question

我想知道为什么我的div不在另一个div旁边？它并不是彼此相邻，而是彼此相邻，我不知道为什么会这样做。

＆＃13;

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

＆＃13;

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

＆＃13;

应该有用吗？我不知道为什么

感谢您抽出时间查看我的代码

此致约翰

Answer 1

你的fieldset的填充量为10px（左边10和右边10），边距为2px（左边2和右边2），边界为2px（左边2和右边2）。您的输入宽度为240 +填充，边距和边框的宽度为270px。

270px的2个字段集合总共为540px。将 .form-search #search 的宽度设为540px而不是485px，它们会相互浮动。

Answer 2

在您的代码中添加以下css

#baaninput,#plaatsinput
{
width: 50%;
float:left;
}

Answer 3

请两点：

fieldset默认样式。
HTML结构。

我做了JSFiddle. 主要问题是fieldset。我想知道tag <fidleset>是否是您的需要。我改变你的DOM并修改CSS。因为fieldset具有默认样式。它不适合你。

CSS在div旁边放置一个div

3 个答案: