CSS在div旁边放置div

我想知道为什么我的div不在其他div旁边？它不是把它放在彼此的旁边，而是在彼此之下，我不知道它为什么这样做。CSS在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>

它应该工作？我不知道为什么

感谢您的时间看我的代码

问候，约翰

来源

2014-09-22 Johan Vlaar

这是一个非常复杂的CSS，用于这样一个简单的布局:) – 2014-09-22 14:06:01

在你的**。form-search按钮**选择器中还有一个输入错误。 __height：50p'x; __应该是__height：50px; __ :) – 2014-09-22 14:15:28

添加下面的CSS代码中的

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

来源

2014-09-22 14:07:27 WisdmLabs

感谢这项工作，我将从这里工作:) – 2014-09-23 07:36:59

你的字段集有10px的的衬垫（10左和右10），2px的边距（左2和右2）和2px的边框（左2和右2）。您的输入宽度为240 +您的填充，边距和边框为您提供270px的宽度。

2个270px的字段总共给你540px。给你的.form-search＃搜索的宽度为540px而不是485px，它们会相互浮动。

来源

2014-09-22 14:11:49

请两点：

fieldset默认样式。
HTML结构。

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

来源

2014-09-22 14:18:19

CSS在div旁边放置div

回答

相关问题