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

使用float: left作为第一张表。
用左边距分隔下两个表格。例如margin-left: 120px;

这是一个着名的问题。供您日后参考。 http://alistapart.com/article/holygrail

Answer 3

首先，用div替换段落标记，然后将以下类添加到每个div;

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

Answer 4

您遇到的问题是错误理解或属性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%，这样浏览器将自动缩小元素。

Answer 5

＆lt; p＆gt;中有一个专长。 HTML的元素，允许在没有结束标记的情况下使用它。下一个显示：块标记（此处：＆lt; h3＆gt;）将自动关闭＆lt; p＆gt;，结束＆lt; / p＆gt;将被忽略。

最简单的解决方案是替换＆lt; p＆gt;与＆lt; div＆gt;

内联块：无法水平显示元素

5 个答案: