哪些html元素应该用div包裹？（<img>、<input>、<textarea>、<form>、<ul> 等..）答案

【问题标题】：Which html elements should be wrapped with div? (<img>,<input>,<textarea>,<form>, <ul>, etc..)哪些html元素应该用div包裹？（<img>、<input>、<textarea>、<form>、<ul> 等..）
【发布时间】：2010-07-25 22:32:12
【问题描述】：

很多时候我在设计时会思考这个问题：

哪些html元素应该用div包裹，在哪些情况下？ （<img>,<input>,<textarea>,<form>, <ul>等）

示例 A- 输入文本：

option1 不带 div：

<input class="input-wrapper" type="text" />

option2 在输入周围带有 div：

<div class="input-wrapper"><input type="text" /></div>

示例 B-img：

option1 不带 div：

<img class="image-wrapper" src="MyPic.jpg" alt="my pic" />

option2 在输入周围带有 div：

<div class="image-wrapper"><img src="MyPic.jpg" alt="my pic" /></div>

编辑：

我谈到的情况是，作为设计师和程序员，我们有时间使用位置来做最好的事情：相对绝对、浮动和没有<br/> 等。

谢谢

【问题讨论】：

这是doctype.com的问题。
你会成为一个伟大的设计师。你的格式很好。

标签： css html image

【解决方案1】：

很多时候，您使用 div 来包裹其他元素，主要是出于布局目的。没有规则说您不应该将 div 包裹在元素周围。在这里呼应 wb 的答案可能是大多数情况下，您可以通过将样式应用于特定元素本身来获得相同的结果。

当我开始使用 css 时，我使用了很多 div 作为包装器，尽管它们没有用处。但是需要一些时间来适应带有适当标签和样式的正确布局。

一些链接可能对阅读有用

http://www.apaddedcell.com/div-itis#

http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/

【讨论】：

非常感谢您的链接！

【解决方案2】：

这个问题对于一个答案来说太模糊了。这一切都取决于您的设计要求。对于您的示例 A，您可能会将输入字段包装在标签中，因此每个输入的附加 div 似乎有点过分 IMO。同样，您可能有一些需要特殊样式的要求。

这也归结为偏好。有些人宁愿包装一个额外的 div 来包装一个图像，而不是添加适当的 CSS 来使该图像成为一个块元素。

【讨论】：