Question

简单地说问题是：

如果第一个表单元素使用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和＆amp; iOS很好地突出了这个问题。理想情况下，专门在Android和ios浏览器中运行的解决方案会很好。

我正在处理的实际形式有以下布局：

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

Answer 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”标签，并尝试做更统一的布局。但是，如果你真的需要使用它，或者你在页面上有不同位置的各种元素，那么就要做好一些风格的工作。

Answer 2

如果您在包含90％宽度的行中，使用55％和35％将为您提供90％宽度的90％。例如，如果你想要90％的一半和一半，你会使用50％和50％ - 这将使用90％的100％。

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

2 个答案: