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

我患过乳腺炎吗?我应该把什么放在一个分区里?

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

    我在编码这样的东西

    <div class="panel">
    <fieldset style="position: absolute; top:8px; left: 136px; width: 136px; height: 64px;">
      <legend> </legend>
      <div class="Label" id="Label1" style="position: absolute; top:8px; left: 16px; width: 81px; height: 14px;">one</div>    
      <div class="TLabel" id="Label2" style="position: absolute; top:32px; left: 16px; width: 54px; height: 14px;">two</div>    
    </fieldset>
    </div>
    

    我是否需要在字段集(或文本输入框、无线分组、其他表单输入元素)周围使用DIV?

    5 回复  |  直到 14 年前
        1
  •  3
  •   Yi Jiang G-Man    14 年前

    呃…不,你不必 div 围绕着那些 fieldset S.

    假设在您的示例中没有表单元素 完全 ,为什么这甚至应该是一个表单?好吧,我从你之前的问题中知道你正在尝试构建一个WYSIWYG表单编辑器,但这并不是使用这种HTML的借口。

    如果我清除您使用的示例,它可能看起来像:

    <fieldset style="top:8px; left: 136px; width: 136px; height: 64px;">
      <label class="Label" id="Label1" style="top:8px; left: 16px;">one</label>    
      <label class="TLabel" id="Label2" style="top:32px; left: 16px;">two</label>    
    </fieldset>
    

    由于一些样式被多次应用,我认为将它们存储在样式表中是合适的。

    fieldset, label {
        position: absolute;
    }
    

    您也不需要在标签上设置明确的宽度和高度,特别是如果您没有任何形式的边框或背景。

    逻辑上你也应该分组 label - input 配对在一起,例如使用无序列表。记住,为了方便使用,您需要 for 属性指向正确的 输入 元素。最好提一下你在这里做什么的背景。

        2
  •  1
  •   Konrad Rudolph    14 年前

    我是否需要在字段集(或文本输入框、无线分组、其他表单输入元素)周围使用DIV?

    只有你自己知道。但一般来说,不是。为什么不直接将样式应用于元素?一 <div> 所有这些元素似乎都是多余的,只有在极少数情况下才有必要。

    尤其是表单上的标签 <label> S!始终使用语义上的__correct_标记,而不是像 <span> <分区> .

        3
  •  1
  •   Ross    14 年前

    可以使用无序列表显示表单元素。

    这对我来说不算太糟糕(除了讨厌的在线绝对定位-Dreamweaver对吧?)

    但那真的很好。

    除了你知道有一个 <label> 元素?

    对应用一个类,您可以消除这两个额外的div

    <div class="panel">
    <fieldset style="position: absolute; top:8px; left: 136px; width: 136px; height: 64px;">
      <legend> </legend>
      <label class="Label" id="Label1" style="position: absolute; top:8px; left: 16px; width: 81px; height: 14px;">one</label> 
      <label class="TLabel" id="Label2" style="position: absolute; top:32px; left: 16px; width: 54px; height: 14px;">two</label>    
    </fieldset>
    </div>
    

    Divitis(IMO)更严重,如:

    <div class="content">
    <div class="content-body">
    <div class="content-start">
    <div class="title">The Title</div>
        <div class="theauthor">The Author</div>
        <div class="thedate"><div class="day">Thursday</div> 10th December</div>
    </div>
    </div>
    </div>
    
        4
  •  1
  •   oezi    14 年前

    不,您不需要在这些元素周围使用DIV—如果您想手动定位它们,可以直接使用元素来实现这一点。另外,如果您需要标签,为什么不使用 <label> -标签?

        5
  •  1
  •   Joe Ratzer    14 年前

    这取决于您试图通过布局实现什么。我们能看看你想做什么吗?

    您肯定要做的一件事是删除内嵌样式,例如:

    style="position: absolute; top:8px; left: 136px; width: 136px; height
    

    把所有这些放到一个CSS文件中。