2

次のデザインでシンプルな UI を実現しようとしています。

ここに画像の説明を入力

しかし、次のようになっています (各<div>s 境界線の周りに赤い実線を追加したので、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>

のプロパティの値を0pxに設定することで、そのすべての子を右揃えにする必要があると思いますが、私の人生では、これを機能させることはできません (私も試しました 、 と)。前もって感謝します。control-panel-divrighttext-alignbox-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 に答える