如何在一行中包装标签和输入文本,并使输入文本占用剩余空间

时间:2017-05-04 04:28:46

标签: html css

我正在尝试将标签和输入文本包装在一行中 我想要这样的输出:    enter image description here

输入框应占据标签占用空间后的所有剩余区域。为了实现它我使用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>

输入文本仍然不占用剩余空间。目前的输出是: enter image description here

非常感谢任何帮助。

3 个答案:

答案 0 :(得分:0)

这里的问题是你没有关闭groupId标签,这就是你输入没有占用剩余空间的原因。这个未封闭的标签会作为父项附加在输入的顶部并产生此问题。

这是一个更新版本,已修复并正在运行 -

&#13;
&#13;
<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;
&#13;
&#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>