Question

我正在尝试学习更多CSS。我继承了一个很好的布局，我现在已经使用了一段时间，我想保持CSS而不是在那里混合表格。我目前正在设计一个单独的表单来处理并排的文本框。我使用span标签来保持这些文本框并排，但现在我想知道这种类型的设计的最佳实践是什么。我应该像我一样使用div容器和跨度，还是应该使用直接div并像我的例子一样浮动它们？

<div style="overflow:hidden; width:100%; border:1px solid #000;">
  <div>
    <div style="float:left"><input type="text" /></div>
    <div style="float:right"><input type="text" /></div>
  </div>

  <div style="clear:left">
    <div><input type="text" /></div>
  </div>
</div>

Answer 1

就标记选择而言，在文本浏览器（Lynx，Links，Elinks）中测试页面总是一个很好的提示，并检查它在那里的显示方式。我通常会为表单使用某种列表（ul，ol或dl）。

不要忘记查看A List Apart的Prettier Accessible Forms文章，这样可以为样式表单提供良好的开端。

Answer 2

我不完全确定你在布局方面想要达到的目标，但是你可以使用更少的标记来获得相同的结果：

  <div style="overflow:hidden; width:100%; border:1px solid #000;">
    <div>
      <input type="text" style="float:left" /><input type="text" style="float:right" />
    </div>
    <div style="clear:left">
      <input type="text" />
    </div>
  </div>

确保将这些内嵌样式移动到类或ID定义中。避免在标记中使用CSS定义。

关于CSS表单布局的问题

2 个答案: