html - 输入表单对齐不正确
问题描述
我是 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>
解决方案
用这个
<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>
推荐阅读
- c# - 从 C# 中的动态 JSON 获取属性名称,然后在 foreach 循环中使用这些属性
- python - 块的 Python 类型提示
- flutter - 例外:类型“字符串”不是类型转换中“用户”类型的子类型
- postgresql - Postgres 12 - 如何减小 wal 目录的大小
- java - 智能助手
- c# - 当在 Unity 中触摸 3d 对象时,如何使 int 增加一个
- r - R data.table:将逗号分隔的列“融化”成行?
- mysql - Nodejs 在 azure 函数中创建 csv 文件并将文件作为附件通过电子邮件发送
- php - SQL IN 和 NOT IN 运算符在 PHP 中不起作用
- python - 在 python 中使用 pywebview 库重新加载/刷新网页