如何包装标签和输入文本在一行，并输入文字需要的剩余空间

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

您没有正确关闭标签，比如你<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 2

这里的问题是，你不关闭为什么你的输入不占用剩余空间<b>标签多数民众赞成。这个未封闭的标签会作为父级附加到您的输入之上并产生此问题。

这里是一个更新的版本与此固定和动作 -

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