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

Question

I am trying to display three tables as three separated elements, displayed horizontally. This means that they should appear one alongside each other, from left to right. I tried to use inline-block and set the margins, borders but it doesn't work:

        <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>

The tables are still displayed vertically.

Answer 1

My suggestion would be to change the containing p tags to divs and then float each one left and then clear them at the end. This will also be a more cross-browser solution.

<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

1. Use float: left for first table.
2. Separate the next two tables with a left margin. eg margin-left: 120px;

It's a famous problem. For your future references. http://alistapart.com/article/holygrail

Answer 3

First, replace the paragraph tags with divs and then add the following class to each div;

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

Answer 4

The issue that you're having is miss-understanding or the property inline-block .

If you simply use inline then the elements would float inline, defying any margin but still border would work.

If you use inline-block (same as your case) the elements would get the margins too, so I guess that is the issue.

What I would ask you to do is to either:

1. Remove all the margin s and use inline-block . This way the elements will be placed as a inline and block . block is a display property's value. You can learn about it here: http://www.w3schools.com/cssref/pr_class_display.asp or go to Mozilla Developer Network here: https://developer.mozilla.org/en-US/docs/Web/CSS/display

2. You can remove the -block and use it simply as inline . This way even if you are having margin s they won't be applied. And they all would be in a line.

One more thing:

You should always note the width of the elements, if any element gets a width more then the width of viewport, it will be placed under the other elements. So try using a width in percentage such as width: 10% this way browser will automatically shrink the element.

Answer 5

There is a specialty in the <p> element of HTML which allows it to be used without a closing tag. The next display:block tag (here: the <h3>) will auto-close the <p>, your closing </p> will be ignored.

Simplest solution is replacing <p> with <div>