输入表单对齐不正确答案

【问题标题】：Input form alignment incorrect输入表单对齐不正确
【发布时间】：2018-07-21 03:43:19
【问题描述】：

我是 CSS 样式方面的初学者。谁能告诉我为什么姓氏输入框的对齐方式不同（没有与“姓氏”部分左对齐）以及为什么工资单ID输入框 - 虽然更接近 - 在文本框和“工资单#”面板之间仍然存在差距?两个输入框的 HTML 完全相同？

根据编辑建议编写代码：

                <div class="round-div" style="border:2px solid #428bca;">
                    <div class="row">
                        <div class="col-sm-6 col-md-4 col-md-offset-4">
                            <div class="admin-wall">
                                <div class="container text-center">
                                        <div class="row">
                                            <img class="img-responsive center-block" style="float:inherit" src="https://s3-ap-southeast-2.amazonaws.com/jdm-my-dev-bucket/australianpharmaceuticalindustrieslogoh.png" />
                                        </div>
                                    <span class="border border-info">
                                            <h1 style="color:#428bca;font-weight:bold">We Love Your Work</h1>
                                            <h4>"Celebrating our people for demonstrating safety, health & wellbeing and our values"</h4>
                                            <div class="panel-info">
                                                <div class="panel-body">
                                                    <div class="row">
                                                        <div class="input-group">
                                                          <span class="input-group-addon" id="inputSurname">Surname</span>
                                                          <input type="text" class="form-control" placeholder="Smith" aria-describedby="inputSurname">
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="input-group">
                                                          <span class="input-group-addon" id="inputPayrollId">Payroll #</span>
                                                          <input type="password" class="form-control" placeholder="53677" aria-describedby="inputPayrollId">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="container text-center">
                                                <div class="row">
                                                    <img class="img-responsive center-block" style="float:inherit" src="https://s3-ap-southeast-2.amazonaws.com/jdm-my-dev-bucket/wlyw_footer.png" />
                                                </div>
                                                <div class="row">
                                                    <h6><small><asp:Label ID="Lblversion" runat="server"></asp:Label></small></h6>
                                                </div>
                                            </div>
                                    </span>
                                </div>
                                </div>
                            </div>
                       </div>
                    </div>

【问题讨论】：

请发布您的代码，而不是截图。
嗨 sdlfyeiwyrw，已根据您的建议完成，谢谢。

标签： html css asp.net

【解决方案1】：

使用这个

<div class="container">
   <div class="input-group col-md-12">
   // Do Your First Input Group
   </div>
   <div class="input-group col-md-12">
   // Do Your Second Input Group
   </div>
</div>

【讨论】：

谢谢 - 这让我很接近，但是当浏览器最大化时仍然存在差距。我尝试了 input-group col-md-8 ，这似乎始终将文本框和“标签”保持在一起。所以谢谢！