使用父容器内的文本框的可用空间

我有一个父容器，宽度可以是50％，60％等。容器内部有3个元素。使用父容器内的文本框的可用空间

标签 - 应使用100％的宽度，必须是第一行。
文本框 - 使用父容器内的可用空间，这里宽度也可以变化为50％，60％等。
按钮后跟文本框，宽度应为50px。

我想实现下面的场景。在下面的场景中，该按钮必须位于文本框旁边。

父容器宽度可以根据不同而不同，文本框应该利用可用空间。
文本框宽度可以变化，所以按钮应该在文本框旁边。

enter image description here

请参阅更清晰的附件。请帮助我解决这个场景的只有CSS和HTML，没有JS。

在此先感谢。

来源

2014-09-04 Ra.

你能提供你的HTML/CSS？ – 2014-09-04 09:05:07

嗨阿列克，这里是jsfiddle http://jsfiddle.net/shahuls_md/gx8p5ch2/ – 2014-09-04 09:11:01

有十几种方法来实现它;有什么限制？ – 2014-09-04 09:11:18

FIDDLE

你可以给position:absolute到您的按钮。所以它会粘在父容器的右侧。

CSS将是：

.parent { 
    margin: 20px; 
    border: 1px solid #CCC; 
    width: 50%; 
    position: relative; 
} 
.parent label { 
    display: block; 
} 
.parent [type="button"] { 
    position:absolute; 
    width:30px; 
    height:30px; 
    bottom:0px; 
    right:0px; 
} 
.parent [type="text"] { 
    width:100%; 
    border:1px solid #CCC; 
    padding:6px 10px; 
    box-sizing:border-box; 
}

来源

2014-09-04 09:34:09 Husen

感谢您的回复。该按钮应该在文本框旁边（不是像float右边的东西）。如果我改变文本框大小，那么按钮应该在文本框旁边（像左边的float）。 – 2014-09-04 09:40:23

使用父容器内的文本框的可用空间

回答

相关问题