CSS <p>标签问题</p>

Question

创建选择框并向其添加CSS后，<p>标记会在抛出页面的选择框旁边对齐。这是我的jfiddle

有关此CSS的任何建议吗？

Answer 1

你float左边的<select>元素，但不清除它，所以可能有更好的方法来做到这一点，但坦率地说，你在jsFiddle中有一堆不相关的代码我我不打算钻研结构：

....
</select>
<div style="clear:both;"></div>

关键是将clear:both样式属性应用于上下文周围的元素，或者启动新元素的位置。

Answer 2

在尝试更正CSS之前，您应该改进HTML代码：

• 根据需要将每个标签和表单元素包含在一个块元素中，并使用严格的Doctype（或者仅使用XHTML 1.x严格的doctype？没关系，无论doctype是什么，这都是一个很好的做法）
• 将每个标签与相应的input[type="text|password|file|radio|checkbox|new html5 one"]相关联，select和textarea：label应该具有与for属性相同的值，而不是表单元素上的id。

CSS中的小故障：

• selectbox与输入的宽度不同，因为许多浏览器中的默认CSS指令不会处理水平填充。

  select {
      -moz-box-sizing:content-box;
      box-sizing:content-box;
  }
  

会处理这件事。

以下是小提琴，我更正了以上所有内容：http://jsfiddle.net/PhilippeVay/H2qdd/