无法使用百分比宽度对齐表单元素的右侧边缘答案

【问题标题】：Can't align right hand edges of form elements using percentage widths无法使用百分比宽度对齐表单元素的右侧边缘
【发布时间】：2012-01-25 19:53:06
【问题描述】：

简单地说，问题是这样的：

如果第一个表单元素使用 90% 的页面宽度，为什么使用 35% 和 55% 的第二行元素不使用相同数量的页面宽度？

我发现我必须根据元素/页面组成通过不同的数量调整 %。

更令人困惑的是，随着浏览器宽度的变化（变窄），列最终会对齐并变小，但问题变得相反，第一行比第二行窄。

我尝试搜索，但我的问题与希望其表单元素位于右侧的人混淆了。因此，轮到我提出一个糟糕的 SO 问题了。 :) 我只是希望我的表单元素整洁，每个元素的右侧边缘与其他元素保持一致。

一个简单的例子如下：

<html>
    <head>
        <title>Form</title>
        <style text="text/css">
            <!--
html, body {
    margin:0; padding:0;
}
form {
    display: block;
}

.inputField {
    width: 90%;
}
.labelField {
    width: 35%;
}
#secondField {
    width: 55%;
}
            -->
        </style>
    </head>
    <body>
        <form>
            <legend>This is the form</legend>
            <input class="inputField" id="firstField" type="tel" name="cardNo" /><br />
            <label class="labelField" for="secondField">Please enter your name:</label>
            <input class="inputField" id="secondField" type="tel" name="cv2" /><br />
            <input class="inputSubmit" id="submit" type="submit" /><br />
        </form>
    </body>
</html>

我尝试过使用 dl/dt/dd 和可怕的 table/tr/td 甚至 ul/li 类型的表格。所有人都遇到类似的问题。一些浏览器，例如firefox，只是稍微有些出局，但chrome和iOS很好地突出了这个问题。理想情况下，专门适用于 android 和 ios 浏览器的解决方案会很好。

我正在处理的实际表单具有以下布局：

Select Input
Text Input
Select Input | Select Input
Label        | Text Input
Submit       | Label        | Checkbox

【问题讨论】：

标签： html css forms browser alignment

【解决方案1】：

好吧，不要深入研究，但您的问题似乎确实植根于您总体上如何构建表单。一旦您对它进行了一些计划，创建表单样式布局就非常简单。请记住，像 FF 和 IE 这样的浏览器呈现填充等内容的方式略有不同。此外，许多元素往往有一些内置的填充、边距等……这可能会对您的页面造成严重破坏，尤其是在使用百分比时。实际上，如果您使用下面的代码，您会注意到在定位按钮时添加了一些额外的填充，以弥补其他元素造成的差异。

这是 CSS：

html, body {
  margin:0; 
  padding:0;
}

form {
  display: block;
}

input[type="submit"]
{
  width:150px !important;  
}

.base-form
{
  width:100%;
}

.base-form p label
{
  width: 15%;
  display:inline-block;
}

.base-form p input
{
  width: 55%;
}

.base-form .btn-row
{
  width:70%;
  padding:0px 10px;
}

.base-form .btn-row p
{
  text-align:right;
}

这是 HTML：

<form class="base-form">
   <legend>This is the form</legend>
   <p>
      <label for="firstField">Please enter your name:</label>
      <input id="firstField" type="tel" name="cardNo" />
   </p>
   <p>
      <label for="secondField">Please enter your telephone:</label>
      <input id="secondField" type="tel" name="cv2" />
   </p>
   <div class="btn-row">
      <p>
         <input id="submit" type="submit" />
      </p>
   </div>
</form>

现在，就我而言，我倾向于不经常使用“br”标签，并尝试做一个更统一的布局。但是，如果您真的需要使用它，或者您在页面上的位置差异很大的各种元素，那么请准备好做一些样式工作。

【讨论】：

我不需要使用br，我只是选择了我写的一个例子来突出问题。
那不是完全相同的形式。如果您让示例的第一行省略标签，则第 1 行只有输入，第 2 行有标签和输入，然后在可变浏览器宽度处对齐右侧（在合理范围内）。
啊哈，现在我明白了。内联块是修复。

【解决方案2】：

当您位于包含 90% 宽度的行中时，使用 55% 和 35% 将为您提供 90% 宽度的 90%。例如，如果您想要 90% 的一半和一半，您将使用 50% 和 50% - 这将使用 90% 的 100%。

【讨论】：

我不在那一排，我在下面的一排。
我明白你的意思，但这不是我的问题。在发布问题之前，我已经按照这些思路进行了测试。