开发者

HTML SPAN tag Stretch to Avaliable Width

I have the following HTML, with a "span" tag which 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 l开发者_如何学Pythonike the child "span" tag to stretch to fill the avaliable 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, crowd the "input" field. Is that possible with CSS?

Here is my current CSS, if that 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


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>
0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜