c# - 如何对齐两个标签和两个文本框而没有水平间隙？-6ren

c# - 如何对齐两个标签和两个文本框而没有水平间隙？

转载作者：太空宇宙更新时间：2023-11-03 21:22:05

24

4

我对使用 Bootstrap 还很陌生，在尝试在同一行上放置一个标签、一个文本框、一个标签和一个文本框时遇到了困难，而且它们之间没有很大的间隙，因此 State TextBox 和 Zip TextBox 与其他 TextBox 对齐，我似乎也无法正确对齐我的提交按钮。这是一个屏幕截图

Some controls not lined up properly and there is a gap

所有这些的标记是

<body>
<form id="form1" runat="server">
    <div class="form-horizontal">

        <h4>Please add your information</h4>
        <hr />
        <asp:ValidationSummary runat="server" CssClass="text-danger" />
        <div class="form-group form-horizontal col-md-8">
            <asp:Label ID="lblName" runat="server" AssociatedControlID="txtName" Text="Name" CssClass="col-md-2 control-label"></asp:Label>
            <div class="col-md-6">
                <asp:TextBox ID="txtName" runat="server" CssClass="form-control"></asp:TextBox>
            </div>
            <br />
            <br />
            <asp:Label ID="lblLastName" runat="server" AssociatedControlID="txtLastName" Text="Last Name" CssClass="col-md-2 control-label"></asp:Label>
            <div class="col-md-6">
                <asp:TextBox ID="txtLastName" runat="server" CssClass="form-control"></asp:TextBox>
            </div>
            <br />
            <br />
            <asp:Label runat="server" AssociatedControlID="Address1" CssClass="col-md-2 control-label" Text="Address1"></asp:Label>
            <div class="col-md-6">
                <asp:TextBox runat="server" ID="Address1" CssClass="form-control" />
            </div>
            <br />
            <br />
            <asp:Label runat="server" AssociatedControlID="Address2" CssClass="col-md-2 control-label" Text="Address2"></asp:Label>
            <div class="col-md-6">
                <asp:TextBox runat="server" ID="Address2" CssClass="form-control" />
            </div>
            <br />
            <br />
            <asp:Label ID="lblCity" runat="server" AssociatedControlID="txtCity" Text="City" CssClass="col-md-2 control-label" Font-Bold="true"></asp:Label>
            <div class="col-md-6">
                <asp:TextBox runat="server" ID="txtCity" CssClass="form-control" />
            </div>
            <br />
            <br />
            <div class="form-group">
                <asp:Label ID="lblState" runat="server" AssociatedControlID="txtState" Text="State" CssClass="col-md-2 control-label" Font-Bold="true"></asp:Label>
                <div class="col-md-2">
                    <asp:TextBox runat="server" ID="txtState" CssClass="form-control" />
                </div>
                <asp:Label ID="lblZip" runat="server" AssociatedControlID="txtZip" Text="Zip" CssClass="col-md-2 control-label" Font-Bold="true"></asp:Label>
                <div class="col-md-2">
                    <asp:TextBox runat="server" ID="txtZip" CssClass="form-control" />
                </div>
            </div>
            <asp:Label ID="lblCountry" runat="server" AssociatedControlID="ddCountry" Text="Country" CssClass="col-md-2 control-label" Font-Bold="true"></asp:Label>
            <div class="col-md-6">
                <asp:DropDownList ID="ddCountry" runat="server" CssClass="form-control"></asp:DropDownList>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-4 col-md-2">
                <asp:Button ID="btnSubmit" runat="server" Text="Send" CssClass="btn btn-primary" />
            </div>
        </div>
    </div>
</form>

我使用 form-inline 取得了成功，但我喜欢 form-horizontal 的外观。

谁能告诉我我做错了什么

编辑

这是我使用 form-inline 时的屏幕截图，它向左对齐，但我不知道如何缩进。

编辑 2

这就是我试图让它看起来的样子。

enter image description here

最佳答案

您需要在每个“行”周围放置 form-group 类，如下所示:

<div class="form-horizontal">
  <h4>Please add your information</h4>
  <hr />
  <div class="form-horizontal col-md-8">
    <div class="form-group">
      <label for="Name" class="col-md-4 control-label">Name</label>
      <div class="col-md-8">
        <input id="Name" type="text" class="form-control" />
      </div>
    </div>
    <div class="form-group">
      <label for="LastName" class="col-md-4 control-label">Last Name</label>
      <div class="col-md-8">
        <input id="LastName" class="form-control" />
      </div>
    </div>
    <div class="form-group">
      <label for="State" class="col-md-4 control-label">State</label>
      <div class="col-md-2">
        <input id="State" class="form-control" />
      </div>
      <label for="Zip" class="col-md-4 control-label">Zip</label>
      <div class="col-md-2">
        <input id="Zip" class="form-control" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-4 control-label">Country</label>
        <div class="col-md-8">
          <select class="form-control"></select>
        </div>
    </div>
    <div class="form-group">
      <div class="col-md-offset-4 col-md-8">
        <button type="submit" class="btn btn-primary">Send</button>
      </div>
    </div>
  </div>
</div>

注意:我将 ASP.NET 服务器控件切换为对应的 HTML。 Bootstrap 类的用法是需要注意的地方，您显然可以像在代码中那样通过 CssClass 属性将它们应用于服务器控件。

此外，我将标记中的每个“行”加起来为 12，以填充您要放入的 8 单位容器。这消除了在标记中使用换行符的需要，因为当 Bootstrap 到达第 12 个单元时，它将转到下一行。

更新

要使 State 和 Zip 条目的行为更像您希望的那样，您需要在该“行”信息上使用 form-inline 类，如下所示:

<div class="form-group">
  <div class="form-inline">
    <label for="State" class="col-md-4 control-label">State</label>
    <div class="col-md-8">
      <input id="State" class="form-control" />
      <label for="Zip" class="control-label" 
             style="padding-left: 20px;">Zip</label>
      <input id="Zip" class="form-control" />
    </div>
  </div>
</div>

注意这会为 State 标签创建一个 4 个单位的区域，以便它与另一行的标签对齐，然后为其余控件(State 文本框、Zip 标签和 Zip 文本框)创建一个 8 个单位的区域). padding-left 样式显然可以调整为不同的值或单位(em 或百分比)并拉出到 CSS 文件中而不是内联，但你得到想法。

更新 2

根据你想要的布局截图，试试这个:

<div class="form-group">
  <label for="State" class="col-md-4 control-label">State</label>
  <div class="col-md-2">
    <input id="State" class="form-control" />
  </div>
  <label for="Zip" class="col-md-offset-3 col-md-1 control-label">Zip</label>
  <div class="col-md-2">
    <input id="Zip" class="form-control" />
  </div>
</div>

注意这使用偏移量将 Zip 标签和 Zip 文本框推向右侧，并使 Zip 标签一个单位宽。

要使“发送”按钮右对齐，请将其排成 12 个单位的行并将按钮向右拉，如下所示:

<div class="form-group">
  <div class="col-md-12">
    <button type="submit" class="btn btn-primary pull-right">Send</button>
  </div>
</div>

注意 pull-right 类是按钮标记的一部分。

关于c# - 如何对齐两个标签和两个文本框而没有水平间隙？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30008948/

24

4

0

文章推荐： python - SQLAlchemy核心engine.execute()与connection.execute()

文章推荐： javascript - 在页面加载时加载模式并在 5 秒后重定向

文章推荐： Python 内联增加多个变量

拆分音频后级联音频中的 FFmpeg 间隙
不确定是间隙还是音频样本未对齐，但是当我将音频文件一分为二时，如下所示: ffmpeg -ss 0 -t 00:00:15.00 -i song.mp3 seg1.mp3 和 ffmpeg -ss 0
cocoa - NSDrawNinePartImage 间隙
我正在使用 NSDrawNinePartImage 绘制自定义按钮/文本字段。我在代码中将图像分割成九个部分，并使用 NSDrawNinePartImage 将其绘制到一个矩形中。不幸的是，我在绘图
android - ProgressBar 间隙
Check this image for the progressbar 知道如何消除 ProgressBar 下的那个小间隙吗？我怎样才能做到没有差距？应该通过 MainActivity 中的 ja
html - 整个网页左侧不需要的边距/间隙
刚开始制作网站时，整个左侧都有几个像素的边距，但我不明白为什么。 http://jsbin.com/elufob/1/ 任何建议将不胜感激 CSS html{ min-width: 1
标题和静态图像之间的 HTML 间隙
我一直在尝试在我的网站上使用静态图像，但页眉和图像之间存在很大差距，我尝试在 Photoshop 和 HTML 中删除填充并更改图像高度。这是我的问题的 fiddle https://jsfiddle
css - 文档顶部的小边距/间隙
我前一段时间遇到过这个问题，忘记了解决方案是什么。我的文档顶部有一个小间隙，大概 5/10 像素？我想你会知道我在说什么，我该如何摆脱它？谢谢最佳答案在您的 CSS 文件中添加: html,
html - 整个网页左侧不需要的边距/间隙
刚开始制作网站时，整个左侧都有几个像素的边距，但我不明白为什么。 http://jsbin.com/elufob/1/ 任何建议将不胜感激 CSS html{ min-width: 1
reactjs - 展开时如何消除 Accordion 间隙？
我正在尝试使用 Accordion MUI 组件在展开模式下不会移动，也不会对某些元素应用顶部和底部边距。示例如下，但它不起作用，我的组件仍然太“跳跃”(扩展时它会增加宽度，并且添加了一些不可见的边
ios - 最后两个单元格之间奇怪的 UITableViewCell 间隙
我有一个自定义 UITableViewCell Card 样式的动态高度，它的空间在应用程序中是恒定的。我正在使用 Storyboard ，并且在 UINavigationBar 下方有 UITool
javascript - 在日期范围数组中查找 'holes'(间隙)
假设您有一组日期范围 var arr = [ { "from": 'unix 1st of august', "until": 'unix 5th of august' },
css - 径向渐变显示一些背线，间隙，空格或边距
我是radial-gradient的新手，我不知道这些多维数据集之间的背线或空格是什么？如何删除它们？ * {margin: 0; outline: 0; border: 0;} .round {
列表前后的 HTML 间隙 (
- css - Chrome 在呈现多个渐变时在中间留下空白/间隙
  我正在阅读 Lea Verou 的《CSS secret 》一书。有一个圆 Angular 径向多重渐变的例子: http://dabblet.com/gist/24484257bc6cf7076a
- html - 修复标题标签前奇怪的 2px 间隙
  我一直在为一个客户做一个元素，一切都很顺利，直到我注意到我的 h1/h2/h3(任何标题标签)已经向右移动了 2/3 像素。他们可能一直都在这样做，但我只是刚刚注意到。当您在 devtools 中突出
- div 内链接之间的 Css 间隙
  这里是 CSS 新手。奇怪的事情发生了，链接之间有间隙，我不知道为什么。我正在使用 html html5 样板 css 进行重置。 HTML代码: Link 1 Link
- html - H1 在标题和页面顶部之间留出空间/间隙
  这个问题在这里已经有了答案: margin on h1 element inside a div (3 个答案) 关闭 6 年前。我有一个问题，我的 h1 标签与我的页面顶部分开 - 像这样:en
- html - 下划线文本 CSS 间隙
  我希望我的文本在事件时带有下划线，但当我这样做时它看起来像这样: 我只希望文本有下划线，如果我使用 text-decoration:underline 它会在单词下划线，但我不知道如何在文本和下划线之
- html - 无法删除表格内两个图像之间的 5px 间隙
  我似乎无法将这两张图片放在一起。它们都在 HTML 表格中自己的行中(我正在制作一封 html 电子邮件)，但我似乎无法删除它们之间的 5px。这是我的代码它也在 jsfi
- Android CardView cardCornerRadius 间隙
  我正在尝试在我的项目中使用新的 CardView UI 小部件，但在某些运行 android 2.3 的设备上，CardView 角之间存在间隙(见下文)。这是在我的 xml 文件中:
- 填充具有公共(public)边框的形状后的Javascript Canvas 间隙
  我想了解并学习当我使用共享边框填充两个形状/路径时遇到的问题的解决方案，即在为所有形状调用填充后，仍然有一个微小的间隙存在于他们之间。该代码片段展示了绘制所涉及的形状/路径的代码: ctx.begi

首页

博学

6Ren·AI

商城

c# - 如何对齐两个标签和两个文本框而没有水平间隙？