Question

在工作中我们遇到的情况是客户需要我们的某个产品的网络前端。没有任何使用是Web开发人员，但自从我完成了我以前的项目后，我自愿为它提供了基础。

我花了大约一周时间阅读最佳实践和asp.net网络表单。根据要求，我们确定了HTML 4 / ASP.NET / CSS 2.1。客户将使用最新的浏览器，因此我必须专注于干净的布局。

我一直在研究使用960.gs系统的样本，我发现在没有太多麻烦的情况下布置内容非常方便，但是，我有一个重大问题。

在我看到的所有教程中，一旦达到内部最内容的布局，它们就会停止或变得非常模糊。

这里有最佳做法吗？或者是否有关于列出最内容的教程。

我所说的就是如下：

<div id="question_1" >
  <asp:Label runat="server">Question 1</asp:Label>
  <asp:Label runat="server" >What is the name of the guy from the other thing?</asp:Label>
  <asp:RadioButton runat="server" Text="Yes"></asp:RadioButton>
  <asp:RadioButton runat="server" Text="No"></asp:RadioButton>
  <asp:DropDownList runat="server"></asp:DropDownList>
</div>

上面的html代表了一个虚构的问题对象。这将在问题列表页面上，就像调查一样。目前，因为我找不到信息，所以我几乎使用css来绝对定位元素，因为我使用的是网格系统，我知道这个div所包含的方框的宽度。

编辑：绝对定位我的意思是在包含元素内而不是整个页面......只是为了清除它。

Answer 1

从表单布局的角度来看，有两件事需要考虑：可用性和可访问性。可用性定义了左侧标签，右侧字段等内容。在这种情况下的例外是当标签在右边时使用单选按钮和复选框。

辅助功能，定义每个字段应该有一个标签标签;字段应按逻辑分组等。

RNIB在网页设计上有collection of articles，涉及可访问性和可用性。我个人认为他们是一个很好的起点。

修改

肉类＆amp; veg回答：理想的编码员（应该）尝试实现表单的样式但保持流程，即确保文本字段的标签样式显示在左侧但显示在HTML中的字段之前。

所以，是的，这是一个好习惯：

将每个标签/字段对包裹在一个div中，允许您将其分开清除/定位到其他配对。

使标签显示：具有固定宽度的块和float：left

不要忘记添加必需的* - 我通常在标签内使用一个跨度，这样我就可以分别控制所需*的样式。

使用<fieldset>标记对标签/字段配对进行分组和设置样式

除非您尝试创建高度风格化的表单，否则请避免绝对定位您不需要的任何内容。我发现，只要我绝对定位一件事，我必须绝对定位其他人以保持一致性，所以你应该首先尝试找到一个允许元素控制后续元素位置的解决方案

我知道仍然使用表来安排表单的开发人员。这不好吗？是的，但它是有效的，对于临时解决方案或小的，很少使用的形式，这可能是一个适当的权衡。

Scott on Writing有一个很好的article on basic form styling。这些家伙很棒，知道他在说什么。

此外，还有jQuery工具可用于创建更具响应性的控件：

jQuery UI

Multi select

使用html的内部最内容

1 个答案: