输入框应占据标签占用空间后的所有剩余区域。为了实现它我使用flex,我的HTML是:
.abc{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
#some-input {
margin : 10px;
display: inline-block;
vertical-align: middle;
width: 100%;
height: 20px;
font-size:15px;
border: 2px solid #7e7e7e;
flex-grow : 30;
}
#label{
margin : 10px;
font-size:15px;
}
<div class="abc">
<div id="label"><b>labelxyz<b></div>
<input id="some-input" name= ”some-input" placeholder="Enter input"/>
</div>
非常感谢任何帮助。
答案 0 :(得分:0)
这里的问题是你没有关闭groupId
标签,这就是你输入没有占用剩余空间的原因。这个未封闭的标签会作为父项附加在输入的顶部并产生此问题。
这是一个更新版本,已修复并正在运行 -
<b>
&#13;
.abc{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
#some-input {
margin : 10px;
display: inline-block;
vertical-align: middle;
width: 100%;
height: 20px;
font-size:15px;
border: 2px solid #7e7e7e;
flex-grow : 30;
}
#label{
margin : 10px;
font-size:15px;
}
&#13;
答案 1 :(得分:0)
您没有正确关闭代码,例如<b>
代码未关闭且quotes
在任何地方都不一样
.abc{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
#some-input {
margin : 10px;
display: inline-block;
vertical-align: middle;
width: 100%;
height: 20px;
font-size:15px;
border: 2px solid #7e7e7e;
flex-grow : 30;
}
#label{
margin : 10px;
font-size:15px;
}
<div class="abc">
<div id="label"><b>labelxyz</b></div>
<input id="some-input" name= "some-input" placeholder="Enter input"/>
</div>
答案 2 :(得分:0)
你错误的html你忘了填写标签
<div class="abc">
<div id="label"><b>labelxyz</b></div>
<input id="some-input" name= ”some-input" placeholder="Enter input"/>
</div>