內聯塊：不能水平顯示元素

Question

我想顯示三個表作爲三個分離的元素，水平顯示。這意味着它們應該從左到右彼此並排。我試圖用inline-block並設置頁邊距，邊框，但它不工作：

 <div style="border:2px solid black; width:485px;"> 
      <h1 align= "center" style="color:blue"> Interaction </h1> 
      <p style="display:inline-block; width:180px; margin:10px; padding:20px;"> 
       <h3> Light </h3> 
       <table border="1"> 
        <tr> 
         <td> Color </td> 
         <td> <input type="text" id="light-color" value="0xffffff"> </input> </td> 
        </tr> 
        <tr> 
         <td> Type </td> 
         <td> 
          <select id="light-type"> 
           <option value="point"> Point Light </option> 
           <option value="spot"> Spot Light </option> 
           <option value="ambient"> Ambient Light </option> 
           <option value="area"> Area Light </option> 
           <option value="directional"> Directional Light </option> 
          <select> 
         </td> 
        </tr> 
       </table> 
      </p> 
      <p style="display:inline-block; width:180px; margin:10px; padding:20px;"> 
       <h3> Material </h3> 
       <table border="1"> 
        <tr> 
         <td> Diffuse </td> 
         <td> <input type="text" id="material-diffuse" value="0xffffff"> </input> </td> 
        </tr> 
        <tr> 
         <td> Ambient </td> 
        <td> <input type="text" id="material-ambient" value="0xffffff"> </input> </td> 
        </tr> 
        <tr> 
         <td> Emissive </td> 
         <td> <input type="text" id="material-emissive" value="0xffffff"> </input> </td> 
        </tr> 
        <tr> 
         <td> Specular </td> 
         <td> <input type="text" id="material-specular" value="0xffffff"> </input> </td> 
        </tr> 
        <tr> 
         <td> Shininess </td> 
         <td> <input type="text" id="material-shininess" value="0xffffff"> </input> </td> 
        </tr> 
        <tr> 
         <td> Type </td> 
         <td> 
          <select id="material-type"> 
           <option value="lambert"> Lambert </option> 
           <option value="normal"> Normal </option> 
           <option value="phong"> Phong </option> 
          </select> 
         </td> 
        </tr> 
       </table> 
      </p> 
      <p style="display:inline-block; width:180px; margin:10px; padding:20px;"> 
       <h3> Object </h3> 
       <table border="1"> 
        <tr> 
         <td> Type </td> 
         <td> 
          <select> 
           <option value= "sphere"> Sphere </option> 
           <option value= "cube"> Cube </option> 
           <option value= "cylinder"> Cylinder </option> 
          </select> 
         </td> 
        </tr> 
       </table> 
      </p> 
     </div> 

的表仍在垂直顯示。

Answer 1

我的建議是將包含p標籤更改爲div，然後將每一個都留下，然後在最後清除它們。這也將是一個更加跨瀏覽器的解決方案。

<div style="border:2px solid black; width:485px;"> 
     <h1 align= "center" style="color:blue"> Interaction </h1> 
     <div style="float:left; display:inline-block; width:180px; margin:10px; padding:20px;"> 
      <h3> Light </h3> 
      <table border="1"> 
       <tr> 
        <td> Color </td> 
        <td> <input type="text" id="light-color" value="0xffffff"> </input> </td> 
       </tr> 
       <tr> 
        <td> Type </td> 
        <td> 
         <select id="light-type"> 
          <option value="point"> Point Light </option> 
          <option value="spot"> Spot Light </option> 
          <option value="ambient"> Ambient Light </option> 
          <option value="area"> Area Light </option> 
          <option value="directional"> Directional Light </option> 
         <select> 
        </td> 
       </tr> 
      </table> 
     </div> 
     <div style="float:left; display:inline-block; width:180px; margin:10px; padding:20px;"> 
      <h3> Material </h3> 
      <table border="1"> 
       <tr> 
        <td> Diffuse </td> 
        <td> <input type="text" id="material-diffuse" value="0xffffff"> </input> </td> 
       </tr> 
       <tr> 
        <td> Ambient </td> 
       <td> <input type="text" id="material-ambient" value="0xffffff"> </input> </td> 
       </tr> 
       <tr> 
        <td> Emissive </td> 
        <td> <input type="text" id="material-emissive" value="0xffffff"> </input> </td> 
       </tr> 
       <tr> 
        <td> Specular </td> 
        <td> <input type="text" id="material-specular" value="0xffffff"> </input> </td> 
       </tr> 
       <tr> 
        <td> Shininess </td> 
        <td> <input type="text" id="material-shininess" value="0xffffff"> </input> </td> 
       </tr> 
       <tr> 
        <td> Type </td> 
        <td> 
         <select id="material-type"> 
          <option value="lambert"> Lambert </option> 
          <option value="normal"> Normal </option> 
          <option value="phong"> Phong </option> 
         </select> 
        </td> 
       </tr> 
      </table> 
     </div> 
     <div style="float:left; display:inline-block; width:180px; margin:10px; padding:20px;"> 
      <h3> Object </h3> 
      <table border="1"> 
       <tr> 
        <td> Type </td> 
        <td> 
         <select> 
          <option value= "sphere"> Sphere </option> 
          <option value= "cube"> Cube </option> 
          <option value= "cylinder"> Cylinder </option> 
         </select> 
        </td> 
       </tr> 
      </table> 
     </div> 
     <div style="clear:both;"></div> 
    </div> 

Answer 2

首先，用div替換段落標記，然後將下面的類添加到每個div;

.nextToEachOther { 
float:left; 
display:inline-block; 
} 

Answer 3

1. 使用float: left的第一個表。
2. 用左邊距分隔下兩個表格。例如margin-left: 120px;

這是一個着名的問題。爲您未來的參考。 http://alistapart.com/article/holygrail

Answer 4

您遇到的問題是理解錯誤或物業inline-block。

如果您只是使用inline那麼元素將浮動內聯，違反任何margin但仍將工作。

如果您使用inline-block（與您的情況相同），元素也會得到邊距，所以我猜這就是問題所在。

我想請你做的是兩種：

1. 刪除所有margin S和使用inline-block。這樣元素將被放置爲inline和block。 block是一個display屬性的值。你可以在這裏學習一下吧：http://www.w3schools.com/cssref/pr_class_display.asp或去這裏Mozilla開發者網絡：https://developer.mozilla.org/en-US/docs/Web/CSS/display

2. 您可以刪除-block和使用它只是作爲inline。這種方式即使你有margin他們將不會被應用。他們都會排隊。

一件事：

您應該始終注意，元素的寬度，如果任何元素獲得的寬度更然後視口的寬度，它將被放置在其他元素之下。所以請嘗試使用百分比寬度，例如width: 10%，這樣瀏覽器會自動縮小元素。

Answer 5

有一個專門的HTML元素，它允許它在沒有結束標記的情況下使用。下一個顯示：塊標記（這裏：< h3>）將自動關閉< p>，您的關閉</p>將被忽略。

簡單的辦法是用< DIV>