我试图将三个表格显示为三个分开的元素，水平显示。这意味着它们应该从左到右彼此并排显示。我尝试使用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>
表格仍然是垂直显示的。
答案 0 :(得分：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>
答案 1 :(得分：1)
float: left作为第一张表。margin-left: 120px; 这是一个着名的问题。供您日后参考。 http://alistapart.com/article/holygrail
答案 2 :(得分：0)
首先，用div替换段落标记，然后将以下类添加到每个div;
.nextToEachOther {
float:left;
display:inline-block;
}
答案 3 :(得分：0)
您遇到的问题是错误理解或属性inline-block。
如果您只是使用inline，那么元素将浮动内联，无视任何margin，但仍然可以border。
如果您使用inline-block（与您的情况相同），元素也会得到边距，所以我猜这就是问题。
我要求你做的是：
删除所有margin并使用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
您可以移除-block并将其简单地用作inline。这种方式即使你有margin s，也不会被应用。他们都会排成一行。
还有一件事：
您应该始终注意元素的宽度，如果任何元素的宽度超过视口的宽度，它将被放置在其他元素下面。因此，尝试使用百分比宽度，例如width: 10%，这样浏览器将自动缩小元素。
答案 4 :(得分：0)
＆lt; p＆gt;中有一个专长。 HTML的元素，允许在没有结束标记的情况下使用它。下一个显示：块标记（此处：＆lt; h3＆gt;）将自动关闭＆lt; p＆gt;，结束＆lt; / p＆gt;将被忽略。
最简单的解决方案是替换＆lt; p＆gt;与＆lt; div＆gt;