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

Question

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

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

输入文本仍然不占用剩余空间。目前的输出是：

非常感谢任何帮助。

Answer 1

这里的问题是你没有关闭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;

Answer 2

您没有正确关闭代码，例如<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>

Answer 3

你错误的html你忘了填写标签

<div class="abc">
    <div id="label"><b>labelxyz</b></div>
    <input id="some-input" name= ”some-input" placeholder="Enter input"/>
</div>