html - 如何对齐具有特定宽度的文本框和标签

Question

嗨，我是 boothstrap 的新手，我努力尝试放置下拉菜单，如下图所示，但我发现很难放置标签和下拉菜单，如下图所示，这是我的代码

这是一个 fiddle ，但我无法在 fiddle 中正确运行我的代码

https://jsfiddle.net/zrcoLyeg/3/

我的部分代码

    <div class="form-group m-t-40 row" style="margin-top: 4px;">

   <label for="companyName" class="col-2 col-form-label" style="margin-left: 40px; text-align: right; color: #455a64;margin-left: 50px"> labe2 </label>


     <label for="companyName" class="col-2 col-form-label" style="text-align: right; color: #455a64;"><label class="custom-control custom-checkbox">
             <input type="checkbox" class="custom-control-input" >
             <span class="custom-control-indicator"></span>
             <span class="custom-control-description"> In House</span>
                                                </label></label>
                                        <div class="col-2" style="padding-right: 45px;">
                                        <div class="controls">
                                                <select name="addressType" id="select11" disabled="disabled" class="form-control" style="width: 180px; padding-bottom: inherit; padding-top: inherit;">
                                                    <option value="">--Select--</option>
                                                    <option value="1">Corporate Office</option>
                                                    <option 
                                                    <option value="3">Sales Office</option>
                                                    <option value="4">Accounts </option>

                                            </select>
                                        </div>



                                    </div>

 <label for="companyName" class="col-2 col-form-label" style="text-align: right; color: #455a64;"><label class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" onchange="document.getElementById('select12').disabled = !this.checked;">
                                                <span class="custom-control-indicator"></span>
                                                <span class="custom-control-description"> Out Source</span>
                                            </label></label>
                      <div class="col-2" style="padding-right: 45px;">
                             <div class="controls">
                                          <select name="addressType" id="select12"  class="form-control" style="width: 180px; padding-bottom: inherit; padding-top: inherit;">
                           <option value="">--Select--</option>
                        <option value="1">Corporate </option>
                            <option value="3">Sales </option>
                          <option value="4">Accounts </option>

                                        </select>
                                    </div>
                                    </div>
 </div>

Answer 1

查看显示 block 和内联 block

这将解决你的问题

label,
input[type="image"], 
input[type="checkbox"], 
input[type="radio"]
select,
div{
  display: inline-block
}