开发者

Stretching input text to fill the division it is contained in

开发者 https://www.devze.com 2023-03-26 23:43 出处:网络
I have a HTML div which contains a label and input text. I want the label to take minimum space and give the remaining space to the text input. In other words, once the label has occupied its space, I

I have a HTML div which contains a label and input text. I want the label to take minimum space and give the remaining space to the text input. In other words, once the label has occupied its space, I want the text input to stretch horizontally to the end of the div it is contained in开发者_如何学Python. Here is the sample code that I am using.

<div>
    <label >Some Label</label>  <!--Should take minimum space -->
    <input type="text"/>        <!--Should stretch horizontally to fill up entire div --> 
</div>


demo here

not the perfect but you can try to implement in that

i found this code

<div class="notificationArea">
    <label >Some Label</label>  
    <input type="text"/>
</div>

css here

.notificationArea
{
    width: 100%;
    vertical-align: left;
    text-align:left;
    background: #ccc;
    display: table;
}
.notificationArea label, .notificationArea input {
    display: table-cell
}
.notificationArea input {
    width: 100%
}
0

精彩评论

暂无评论...
验证码 换一张
取 消