相关疑难解决方法(0)

嵌套<div>或<p>标记内的任何其他块级元素在语法和语义上是否正确.我在谈论HTML4 Transitional DTD.

如果不是那么可以代替使用<span style="display: block">吗？

来自http://webdesign.about.com/od/htmltags/p/aadivtag.htm

在HTML 4中,DIV元素不能位于另一个块级元素内,就像P元素一样.但是,在HTML5中,DIV元素可以在里面找到,并且可以包含其他流内容元素,如P和DIV.

我在表格中有这样的东西

<p> <label...> <input...> </p>

但是当Rails自动生成一个包含输入的error_explanation div时,一个段落变为两个,我在Firebug中看到了这个:

<p> <label...> </p> <div...> <input...> </div> <p> </p>

另外,如果我只是添加一个简单的

<p> <div> test </div> </p>

发生同样的问题(JSFiddle),它在DOM中呈现为

<p> </p> <div> test </div> <p> </p>

为什么？

更新:我通过电子邮件发送了文章的作者,并做了相应的更改.

我正在使用Bootstrap,它是水平形式的演示:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <input type="email" class="form-control" id="inputEmail1">
    </div>
  </div>
</form>

但是我不想为每个创建ID <input>,所以

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="block">
      <span class="col-lg-2 control-label">Email</span>
      <div class="col-lg-10">
        <input type="email" class="form-control">
      </div>
    </label>
  </div>
</form>

但display:block不能在里面display:inline,所以我用CSS

.block {
  display: block;
}

它工作正常,但它是否正确？因为我听说我们不应该将display:block元素放入display:inline元素(label)

在<button>规范部分中,我们看到允许的内容仅是Phrasing内容.它是有效的HTML代码部分(在此处选中):

<button>
    <span></span>
</button>

这不是有效的HTML代码部分(在此处选中):

<button>
    <div></div>
</button>

错误:在此上下文中,元素div不允许作为元素按钮的子元素.(抑制此子树中的更多错误.)

但我们可以改变以下的display属性<span>:

<button>
    <span style="display: block"></span>
</button>

看起来我们使用的是<div>a <span>,但HTML是有效的.(通过规范)是否可以使用允许的内容元素并更改其display属性？