html - 使用 html 的最内部内容

Question

在工作中，我们遇到过这样一种情况，客户需要我们的一种产品的 Web 前端。 Web 开发人员没有任何用处，但由于我正在完成我以前的元素，所以我自愿为它打下基础。

我花了大约一周的时间阅读最佳实践和 asp.net web 表单。根据要求，我们选择了 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

从表单布局的 Angular 来看，有两件事需要考虑:可用性和可访问性。可用性定义了一些东西，比如左边的标签，右边的字段。这种情况下的异常(exception)情况是标签位于右侧时带有单选按钮和复选框。

Accessibility，定义了每个字段都应该有一个label标签；字段应按逻辑分组等。

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

编辑:

肉类和蔬菜答案:理想的编码人员(应该)尝试并实现表单样式但保持流程，即确保文本字段的标签样式显示在左侧但出现在 HTML 中的字段之前。

所以，好的做法是:

• 将每个标签/字段对包装在一个 div 中，允许您将其与其他配对分开/定位。
• 让标签display:block固定宽度，float:left
• 不要忘记添加 required * - 我通常在标签内使用 span，这样我可以单独控制 required * 的样式。
• 使用<fieldset>对标签/字段配对进行分组和样式集的标签
• 除非您正在尝试创建高度程式化的表单，否则请避免绝对定位您不需要的任何内容。我发现一旦我对一件事进行绝对定位，我就必须对其他事物进行绝对定位以保持一致性，因此您应该始终首先尝试找到一个允许元素控制后续元素位置的解决方案
• 我知道开发人员仍然使用表格来排列他们的表单。这很糟糕吗？是的，但它有效，对于临时解决方案或很少使用的小型解决方案，这可能是一种适当的权衡。

Scott on Writing 写得很好 article on basic form styling .这些人很棒，知道他在说什么。

还有一些 jQuery 工具可以创建更好的响应式控件:

• > jQuery UI
• > Multi select