这些子div为什么不对齐其父母的右侧？

Question

I am trying to achieve a simple UI with the following design: 我正在尝试通过以下设计实现简单的用户界面：

在此处输入图片说明

But am getting the following (I added solid red lines around each <div> s border so I could see div borders; will be removing them once everything is placed correctly): 但是正在得到以下结果（我在每个<div>的边框周围添加了实线，以便可以看到div边框；在正确放置所有内容后，它们将被删除）：

在此处输入图片说明

Here is the code: 这是代码：

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

I believe that by setting control-panel-div 's right property have a value of 0px, then all of its children should be right-aligned, but for the life of me I can't get this to work (I have also tried text-align , and box-align ). 我相信，通过将control-panel-div的right属性设置为0px，则其所有子级都应右对齐，但是对于我来说，我无法使其正常工作（我也尝试过text-align和box-align ）。 Thanks in advance. 提前致谢。

Answer 1

I won't comment about using tables for this, but you can just change your CSS to: 我不会对此使用表发表评论，但是您可以将CSS更改为：

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

to get the effect. 获得效果。

jsFiddle example jsFiddle示例

Answer 2

Try 尝试

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

Here is the doc if you need to read on the property: http://www.w3schools.com/css/css_float.asp 如果您需要阅读该属性，请参阅以下文档： http : //www.w3schools.com/css/css_float.asp

Answer 3

Without much hassle, and with clearer markup: 没有太多麻烦，并且标记更加清晰：

<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 个解决方案

解决方案1
5 已采纳 2012-10-09 19:01:15

解决方案2
1 2012-10-09 19:02:12

解决方案3
0 2012-10-09 19:06:14

这些子div为什么不对齐其父母的右侧？

问题描述

3 个解决方案

解决方案1 5 已采纳 2012-10-09 19:01:15

解决方案2 1 2012-10-09 19:02:12

解决方案3 0 2012-10-09 19:06:14

解决方案1
5 已采纳 2012-10-09 19:01:15

解决方案2
1 2012-10-09 19:02:12

解决方案3
0 2012-10-09 19:06:14