1

ダイアログボックス内の次の行にテキスト入力フィールドと2つのボタンがあります。

ダイアログの中央に入力フィールドを並べて、ボタンを入力フィールドの右端に揃えるにはどうすればよいですか？

私は次のコードで私が求めている結果を達成することができましたが、これはテキスト入力を右に揃えるので、より良い方法があるはずだと感じています：

<style>

.container
{
    border: 1px solid #ccc;
    text-align: right;
        width: 100%;
        padding-right: 20px;
}

</style>


<div class="container">

<p><input id="selContactLists" name="selContactLists" type="text" class="textbox" id="textbox" /></p>
<input name="" type="button" value="Button"/> 
<input name="" type="button" value="Button"/>

4

3 に答える 3

2

CSS：

.container {
    display: inline-block;
}

input.text {
    width: 150px;
    display: block;
}

.right {
    float: right;
}

HTML：

<div class="container" >
    <input type="text" class="text" />
    <span class="right">
        <input type="button" value="button" />
        <input type="button" value="button" />
    </span>
</div>

実例： http： //jsfiddle.net/GTTFY/

于 2012-08-08T11:42:38.360 に答える
0 
<style>

.container
{
    margin-left:auto;
    margin-right:auto;
    width:150px;
    }

</style>


<div class="container" >

<input name="" type="text" class="textbox" id="textbox" />
<input name="" type="button" style="float:right;" value="Button"/> 
<input name="" type="button" style="float:right;" value="Button"/> 

</div>
于 2012-08-08T10:46:12.370 に答える
0 
<style>

.test
{
    margin-left:auto;
    margin-right:auto;

}
.test td
{
    float:right;
}
</style>

<table class="test">
    <tr>
        <td colspan=2><input name="" type="text" class="textbox" id="textbox" /></td>
    </tr>
    <tr>
        <td><input name="" type="button" value="Button"/> </td>
        <td><input name="" type="button" value="Button"/> </td>
    </tr>
</table>
于 2012-08-08T11:10:07.040 に答える