Question

我有以下HTML，带有“span”标记，其中包含“输入”字段和“span”标记并排：

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

我希望子“span”标签可以拉伸以填充“输入”文件右侧和其父“span”标签右侧之间的可用区域。我不希望它填充父“span”标签的整个区域，因此挤满了“输入”字段。这可能与CSS有关吗？

这是我目前的CSS，如果有帮助：

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;
}

感谢您的时间，
spryno724

Answer 1

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>

HTML SPAN标记拉伸到可用宽度

1 个答案: