如何在flex box css中完成内联标签和文本框之间的空间

Question

这是代码

 <div _ngcontent-c45="" class="col-sm-6 formControlDiv" fxflex="" ng-reflect-flex="" > <label _ngcontent-c45="" class="control-label" for="Reference" style="background: blue;
color: white;">Reference</label> <input _ngcontent-c45="" class="form-control ng-untouched ng-pristine ref" disabled="" id="Reference" name="Reference" placeholder="Reference" ng-reflect-name="Reference" ng-reflect-is-disabled="" ng-reflect-model="BTR-3-TEST" value="BTR-3-TEST"> </div>

参考

Answer 1

<label>和<input>有display:inline。

为了简化一些事情，您应该将任何内联元素视为一个简单的字母。你的信件之间有一个空格：...</label> <input... >。

当您输入foo bar时，您希望浏览器输出：foo bar，而不是foobar。如果有其他内联元素，请不要期望。

＆＃13;

＆＃13;

<div _ngcontent-c45="" class="col-sm-6 formControlDiv" fxflex="" ng-reflect-flex="" > <label _ngcontent-c45="" class="control-label" for="Reference" style="background: blue;
color: white;">Reference</label><input _ngcontent-c45="" class="form-control ng-untouched ng-pristine ref" disabled="" id="Reference" name="Reference" placeholder="Reference" ng-reflect-name="Reference" ng-reflect-is-disabled="" ng-reflect-model="BTR-3-TEST" value="BTR-3-TEST"> </div>

＆＃13;

＆＃13;

＆＃13;

如果您希望将标记放在不同的行上，为了提高代码的可读性和可维护性，请将换行符放在标记内：

 </label
 ><input ...>

注意：如果删除该空格无法解决您的问题，则应对margin和{{1}上的padding和<label>进行三重检查}。