代码之家  ›  专栏  ›  技术社区  ›  Mawg says reinstate Monica

html:嵌套divs问题

  •  0
  • Mawg says reinstate Monica  · 技术社区  · 14 年前

    我正在编码表单生成器。到目前为止,很好,然后我决定给它一个真正的测试。

    我制作了一个表单,其中每个表单都有一些嵌套控件。

    我会在结尾处发布HTML。如果您将它加载到浏览器中,它会呈现,但显然是错误的。

    我以前使用W3C验证器进行过测试,结果很好,但这是针对非嵌套的。当我使用嵌套验证表单时,会收到错误:

    Error  Line 13, Column 117: document type does not allow element "DIV" here
    
    …style="position: absolute; top:88px; left: 256px; width: 145px; height: 21px;">
    

    那么,我该如何纠正呢?如何处理嵌套字段集?

    这是完整的HTML

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    </head>
    <body>
    <form action="C:\temp\an_elogger_test.php" method="get"><div class="TGroupBox" id="GroupBox1">
    <fieldset style="position: absolute; top:24px; left:24px; width: 449px; height: 473px;">
    <legend>GroupBox1</legend>
    <div class="TPanel" id="Panel1">
    <fieldset style="position: absolute; top:64px; left:64px; width: 361px; height: 217px;">
    <legend></legend>
    <div class="TComboBox" id="ComboBox1" style="position: absolute; top:88px; left: 256px; width: 145px; height: 21px;">
      <select name="ComboBox1">
        <option value="- one -" selected="selected">- one -</option>
        <option value="- two -">- two -</option>
        <option value="- three -">- three -</option>
    </select>
    </div>
    <div class="TGroupBox" id="GroupBox2">
    <fieldset style="position: absolute; top:80px; left:88px; width: 145px; height: 177px;">
    <legend>GroupBox2</legend>
    <div class="TCheckBox" id="CheckBox1" style="position: absolute; top:112px; left: 104px; width: 97px; height: 17px;">CheckBox1<input type="checkbox" name="CheckBox1" value="CheckBox1Checked"></div>
    <div class="TCheckBox" id="CheckBox2" style="position: absolute; top:152px; left: 112px; width: 97px; height: 17px;">CheckBox2<input type="checkbox" name="CheckBox2" value="CheckBox2Checked"checked="checked"></div>
    </fieldset>
    </div>
    <div class="TRadioGroup" id="RadioGroup2">
    <fieldset style="position: absolute; top:128px; left: 264px; width: 145px; height: 137px;"><legend>RadioGroup2</legend>
    
    eins: <input type="radio" name="RadioGroup2" value="eins" checked><br>
    
    zwei: <input type="radio" name="RadioGroup2" value="zwei"><br>
    
    drei: <input type="radio" name="RadioGroup2" value="drei"><br>
    </fieldset>
    </div>
    </fieldset>
    </div>
    <div class="TMemo" id="Memo1"><textarea name="Memo1" rows="8" cols="13" style="position: absolute; top:320px; left: 88px; width: 185px; height: 89px;">
    </textarea>
    </div>
    <div class="TComboBox" id="ComboBox2" style="position: absolute; top:328px; left: 296px; width: 145px; height: 21px;">
      <select name="ComboBox2">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
        <option value="d" selected="selected">d</option>
        <option value="e">e</option>
    </select>
    </div>
    </fieldset>
    </div>
    <div class="TPanel" id="Panel2">
    <fieldset style="position: absolute; top:32px; left:520px; width: 425px; height: 449px;">
    <legend></legend>
    <div class="TPanel" id="Panel3">
    <fieldset style="position: absolute; top:64px; left:552px; width: 345px; height: 185px;">
    <legend></legend>
    <div class="TMemo" id="Memo2"><textarea name="Memo2" rows="8" cols="13" style="position: absolute; top:88px; left: 584px; width: 185px; height: 89px;">
    You may wish to leave this memo emptyOr perpahaps give instructions aboout what should be written here</textarea>
    </div>
    <div class="TEdit" id="Edit1" style="position: absolute; top:200px; left: 600px; width: 121px; height: 21px;"><input type="text" name="Edit1"value="Insert text here"></div>
    </fieldset>
    </div>
    <div class="TGroupBox" id="GroupBox3">
    <fieldset style="position: absolute; top:272px; left:552px; width: 345px; height: 185px;">
    <legend>GroupBox3</legend>
    <div class="TPanel" id="Panel4">
    <fieldset style="position: absolute; top:304px; left:584px; width: 177px; height: 137px;">
    <legend></legend>
    <div class="TRadioGroup" id="RadioGroup1">
    <fieldset style="position: absolute; top:312px; left: 600px; width: 97px; height: 105px;"><legend>RadioGroup1</legend>
    
    one: <input type="radio" name="RadioGroup1" value="one"><br>
    
    two: <input type="radio" name="RadioGroup1" value="two" checked><br>
    
    three: <input type="radio" name="RadioGroup1" value="three"><br>
    </fieldset>
    </div>
    </fieldset>
    </div>
    <div class="TEdit" id="Edit2" style="position: absolute; top:320px; left: 776px; width: 105px; height: 21px;"><input type="text" name="Edit2"></div>
    </fieldset>
    </div>
    </fieldset>
    </div>
    </form>
    </body>
    </html>
    
    1 回复  |  直到 14 年前
        1
  •  2
  •   Russ Clarke    14 年前

    试着放一个 <legend>something</legend> 字段集中DIV之前的元素。

    字段集是块级元素,但为了符合要求,必须在其中包含一个图例。