无法使用百分比宽度对齐表单元素的右侧边缘
简而言之，问题是：
如果第一个表单元素使用 90% 的页面宽度，为什么使用 35% 和 55% 的第二行元素不使用相同数量的页面宽度？
我发现我必须根据元素/页面组成对百分比进行不同的调整。
更令人困惑的是，随着浏览器宽度的变化（变窄），列最终会对齐并变小，但问题却变得相反，第一行比第二行窄。
我尝试过搜索，但我的问题与人们希望其表单元素位于右侧的情况混在一起。现在轮到我提出一个糟糕的问题了。 :) 我只是希望我的表单元素整洁，每个元素的右手边缘与其他元素对齐。
一个简单的例子如下：
<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 和 Firefox 则稍显落后。 iOS很好地突出了这个问题。理想情况下，专门适用于 android 和 ios 浏览器的解决方案会很好。
我正在处理的实际表单具有以下布局：
Select Input
Text Input
Select Input | Select Input
Label | Text Input
Submit | Label | Checkbox
Put simply the problem is thus:
If the first form element uses 90% of page width why doesn't the second row of elements, using 35% and 55%, use the same amount of the pages width?
I find I have to tweak the % up by differing amounts depending on the elements/page composition.
More confusingly as browser width changes (narrows) the columns eventually align and going smaller still the problem becomes inverted with the first row narrower than the second.
I've tried to search but my problem gets mixed up with people wanting their form elements on the right. So it's my turn for a bad SO question. :) I simply want my form elements to be neat, the right hand edge of each element to be in line with the others.
A simple example is the following:
<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>
I have tried using dl/dt/dd and horrible table/tr/td and even ul/li type forms. All suffer similar issues. Some browsers, such as firefox are only slightly out, but chrome & iOS highlight the problem well. Ideally a solution that specifically works in android and ios browsers would be good.
The actual form I'm dealing with has the following layout:
Select Input
Text Input
Select Input | Select Input
Label | Text Input
Submit | Label | Checkbox
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
好吧，不要深入研究，但你的问题似乎确实根源于你如何构建你的表单。一旦你计划好了，创建表单样式布局就非常简单了。请记住，像 FF 和 IE 这样的浏览器渲染诸如填充之类的内容略有不同。此外，许多元素往往有一些内置的填充、边距等......这可能会对您的页面造成严重破坏，尤其是在使用百分比时。事实上，如果您使用下面的代码，您会注意到定位按钮时需要一些额外的填充，以弥补其他元素造成的差异。
这是 CSS：
这是 HTML：
现在，就我而言，我倾向于不太使用“br”标签，并尝试做更统一的布局。但是，如果您确实需要使用它，或者页面上的不同位置有各种元素，那么请准备好做一些样式工作。
Well, not to delve too deeply, but your problem really seems to be rooted in how you are structuring your form in general. Creating a form style layout is pretty straightforward once you have it a bit planned out. Remember, browsers like FF and IE render things like padding and such slightly differently. Furthermore, a lot of elements tend to have some built in padding, margins, etc... that can cause havoc with your page, especially when using percentages. In fact, if you use the code below, you will notice that a little bit of extra padding went into positioning the button, to make up for the difference caused by the other elements.
Here is the CSS:
And here is the HTML:
Now, for my part, I tend to not use the "br" tag very much, and try to do a more uniform layout. However, if you really need to use it, or you have various elements in drastically different positions on the page, then be prepared to do some style work.
当您位于包含 90% 宽度的行时，使用 55% 和 35% 将为您提供 90% 宽度的 90%。例如，如果您想要 90% 的一半，您将使用 50% 和 50% - 这将使用 90% 的 100%。
When you are in the row containing the 90% width, using 55% and 35% will give you 90% of the 90% width. For example, if you wanted half and half of the 90%, you would use 50% and 50% - this will use 100% of the 90%.