Question

我正在尝试使用以下设计实现简单的用户界面：

enter image description here

但是我得到了以下内容（我在每个<div>边框周围添加了红色实线，这样我就可以看到div边框;一旦正确放置后将删除它们：

enter image description here

以下是代码：

<html>
<head>
    <title>Options</title>
    <style>
        #control-panel-div {
            right: 0px;
        }
    </style>    
</head>
<body>
    <div id="content">
        <div id="option-sel-div" style="border: 1px solid red;">
            <select id="provider-sel">
                <option selected="selected" id="default">Select an option</option>
                <option id="1">option1</option>
                <option id="2">option2</option>
            </select>
        </div>

        <div id="config-manage-div" style="border: 1px solid red;">
            <div id="control-panel-div" style="border: 1px solid red;">
                <input id="add-config-btn" type="button" value="Add"/>

                <input id="remove-config-btn" type="button" value="Remove"/>
            </div>

            <div id="table-div" style="border: 1px solid red;">
                <div id="config-datatable">
                    <table>
                        <tr>
                            <td>
                                Blah
                            </td>
                            <td>
                                bleh
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Fizz
                            </td>
                            <td>
                                Buzz
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我相信通过设置control-panel-div的{{1}}属性的值为0px，那么它的所有子节点都应该是右对齐的，但是在生命中我无法让这个工作（我也尝试过right和text-align）。提前谢谢。

Answer 1

我不会评论为此使用表格，但您可以将CSS更改为：

#control-panel-div {
    text-align: right;
}

获得效果。

<强> jsFiddle example

Answer 2

尝试

#control-panel-div {
    float: right;
}

如果您需要阅读该属性，请参阅以下文档：http://www.w3schools.com/css/css_float.asp

Answer 3

没有太多的麻烦，而且标记更清晰：

<style type="text/css">
    form {
        width: 300px;
    }
    fieldset {
        float: right;
        border: 0;
    }
    table {
        clear: both;
    }
</style>

<form action="index.php">
    <select name="the_select">
        <option selected="selected" id="default">Select an option</option>
        <option id="1">option1</option>
        <option id="2">option2</option>
    </select>
    <fieldset>
        <legend>Controls</legend>
        <button>Add</button>
        <button>Remove</button>
    </fieldset>
    <table>
        <tr>
            <td>
                Blah
            </td>
            <td>
                bleh
            </td>
        </tr>
        <tr>
            <td>
                Fizz
            </td>
            <td>
                Buzz
            </td>
        </tr>
    </table>

</form>

为什么这些儿童div不会与父母的右侧对齐？

3 个答案: