All geek questions in one place

HTML SPAN Tag Pull to Available Width

I have the following HTML with a span tag that contains an input field and a span tag side by side:

<span class="container"> <input name="firstName" id="firstName" type="text"> <span class="tip">Enter your first name</span> </span>

I would like the span tag for the child to stretch to fill the available area between the right side of the input file and the right side of its parent span tag. I do not want it to fill the entire area of ​​the parent span tag and thus push the input field. Is this possible with CSS?

Here is my current CSS if this helps:

 span.container { font-size:14px; border:1px solid #22C3EB; border-radius:5px; padding:0px 10px 0px 10px; width:200px; display:block; } input[type="text"], input[type="password"], textarea { background: none; border: none; width:200px; font-size:14px; padding:11px 10px 11px 0px; } span.tip { position:absolute; top:inherit; padding:11px 0px 11px 10px; display:none; }

Thank you for your time,
spryno724

+4
source share
1 answer

http://jsfiddle.net/pramendra/CmgvE/1/

 span{ } span span{ width:100%; background:#f00; display:inline-block; } span input{ float:left; } <span> <span> <input type="text" /> some text </span> </span>
+10
source

Source: https://habr.com/ru/post/1347195/

More articles:


All Articles