对齐按钮的右侧和输入 [英] align right side of button and input

问题描述

我在对话框中的下一行上有一个文本输入字段和2个按钮。

如何排列对话框中间的输入栏，并将按钮对齐到输入栏的右边缘？

我设法使用下面的代码实现了我的结果，但是感觉像一定有一个更好的方法，因为这样可以将文本输入对齐到右边：

 < style> 
 
 .container 
 {
 border：1px solid #ccc; 
 text-align：right; 
 width：100％; 
 padding-right：20px; 
} 
 
< / style> 
 
 
< div class =container> 
 
< p>< input id =selContactListsname =selContactListstype =textclass =textboxid =textbox/>< / p& 
< input name =type =buttonvalue =Button/> 
< input name =type =buttonvalue =Button/> 
  

解决方案>

CSS：

  .container {
 display：inline-block; 
} 
 
 input.text {
 width：150px; 
 display：block; 
} 
 
 .right {
 float：right; 
} 
  

HTML：

 < div class =container> 
< input type =textclass =text/> 
< span class =right> 
< input type =buttonvalue =button/> 
< input type =buttonvalue =button/> 
< / span> 
< / div> 
  

工作示例： http://jsfiddle.net/GTTFY/

I have a text input field and 2 buttons on the next line within a dialog box.

How may I line up the input field in the center of the dialog and align the buttons to the right hand edge of the input field?

I have managed to achieve the results I'm after with the following code, but it feels like there must be a better way as this aligns the text input to the right also:

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

解决方案

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>

Working example: http://jsfiddle.net/GTTFY/

这篇关于对齐按钮的右侧和输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！