0

我试图将三个表格显示为三个独立的元素，水平显示。这意味着它们应该从左到右并排出现。我尝试使用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>

表格仍然垂直显示。

4

5 回答 5

1
  1. 用于float: left 第一张桌子。
  2. 用左边距分隔接下来的两个表。例如margin-left: 120px;

这是一个著名的问题。供您将来参考。http://alistapart.com/article/holygrail

于 2013-10-09T11:22:16.507 回答
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>
于 2013-10-09T11:19:16.057 回答
0

您遇到的问题是误解或财产inline-block。

如果你简单地使用inline，那么元素将内联浮动，无视任何margin但仍然border可以工作。

如果你使用inline-block（与您的情况相同）元素也会获得边距，所以我想这就是问题所在。

我会要求你做的是：

  1. 删除所有margins 并使用inline-block. 这样，元素将被放置为 ainline和block。block是display属性的值。您可以在此处了解它：http: //www.w3schools.com/cssref/pr_class_display.asp或在此处访问 Mozilla 开发者网络：https ://developer.mozilla.org/en-US/docs/Web/CSS/展示

  2. 您可以删除-block并将其简单地用作inline. 这样，即使您有margins，它们也不会被应用。他们都会排成一列。

还有一件事：

您应该始终注意元素的宽度，如果任何元素的宽度大于视口的宽度，它将被放置在其他元素的下方。因此，请尝试使用百分比宽度，例如width: 10%浏览器会自动缩小元素。

于 2013-10-09T11:27:35.623 回答
0

HTML 的 <p> 元素有一个特殊之处，它允许在没有结束标记的情况下使用它。下一个 display:block 标签（这里：<h3>）将自动关闭 <p>，你的关闭 </p> 将被忽略。

最简单的解决方案是将 <p> 替换为 <div>

于 2013-10-09T11:44:29.083 回答
0

首先，将段落标签替换为 div，然后在每个 div 中添加以下类；

.nextToEachOther {
 float:left;
 display:inline-block;
}
于 2013-10-09T11:19:24.350 回答