2

我正在尝试使用以下设计实现一个简单的 UI：

在此处输入图像描述

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

在此处输入图像描述

这是代码：

<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的right属性值为 0px，那么它的所有孩子都应该是右对齐的，但是对于我的生活，我无法让它工作（我也尝试过text-align，和box-align）。提前致谢。

4

3 回答 3

5

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

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

来获得效果。

jsFiddle 示例

于 2012-10-09T19:01:15.503 回答
1

尝试

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

如果您需要阅读该属性，这里是文档：http: //www.w3schools.com/css/css_float.asp

于 2012-10-09T19:02:12.570 回答
0

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

<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>
于 2012-10-09T19:06:14.540 回答