如何製作div內聯？

Question

我正在使用包裝，但我很困惑。我希望兩個resultboxdiv s符合submitdiv。

到這裏看看：

http://jsfiddle.net/QtVwr/

我在做什麼錯？

我對CSS不太熟悉。

Answer 1

部分問題是您的HTML存在問題。這裏有一個開始：

1. 確保所有div s都已關閉。
2. 從你的CSS刪除float小號
3. 添加display:inline-block;
4. 從你的HTML中刪除內嵌樣式。
5. 糾正.wrapper類是.wrapper1（匹配HTML）

所以，這更是你想要什麼，我認爲：

.wrapper1 { 
    height:70px; 
    width: 800px; 
    background: #ffffff; 
    border: 1px solid grey; 
    color: #BDBDBD; 
} 

.resultbox { 
    width: 300px; 
    background: #ffffff; 
    color: #BDBDBD; 
    display: inline-block; 
} 

.submit { 
    height:15px; 
    width: 32px; 
    margin-top:10px; 
    background: #ffffff; 
    border: 1px solid; 
    color: #BDBDBD; 
    display: inline-block; 

} 

和HTML

<div class="wrapper1"> 
    <div class="resultbox" style="" > 
     <div class="locationresult" style="" form action="weezyresults.php" method="post"> 
      <input type="text" name="search" size="36" value="" style="" /> 
     </div>  
    </div> 

    <div class="resultbox" style="" > 
     <div class="locationresult" style="" form action="weezyresults.php" method="post"> 
      <input type="text" name="search" size="36" value="" style="" /> 
     </div>  
    </div> 

    <div class="resultbox" style="width:35px;" > 
     <div class="submit"></div> 
    </div>  

</div> 

例如：http://jsfiddle.net/QtVwr/2/

你仍然需要擺弄它。但這是一個開始。

Answer 2

爲了div在線，你應該使用下面的CSS樣式：

.mydiv{ display: inline; } 

注：您的包裝變更寬度（使它更小），你會看到結果

Answer 3

你的結果的寬度合併的盒子超出了你的包裝盒的寬度。您需要更寬的包裝或減少結果框的寬度。

Answer 4

爲什麼你在resultbox div中提交div？ 爲什麼margin-left：10px，只有第一個div？

我會做這樣的：

<div id="wrapper"> 
<div class="resultbox"></div> 
<div class="resultbox"></div> 
<div id="submit"></div> 
</div> 

，並設置包裝的寬度和高度，並讓其他的div浮動。這只是一個很長的畫面，並不完全確定你想要完成什麼。我只是覺得你的嵌套不好。

Answer 5

您提供的代碼有幾個問題。

• 您已經定義CSS規則的一類包裝，但在你的HTML中使用類wrapper1
• 類包裝沒有足夠的寬度共同作用的結果箱再加上提交
• 有額外的引號第二個結果框style="margin-left: 5px; margin-top: 3px;""
• 表單標籤是畸形的，並與您的div標籤
• 形式的標籤是不被關閉交織
• locationresult div標籤未關閉
輛
• 花車這裏需要清除

是小提琴

http://jsfiddle.net/e3dg6/