CSS - 使用标签标签格式化表单答案

【问题标题】：CSS - Formatting Forms with label tagsCSS - 使用标签标签格式化表单
【发布时间】：2009-08-21 16:31:45
【问题描述】：

我有一个表单，我正在尝试用 CSS 进行语义布局和格式化。由于它是动态生成的（来自 ASP.NET MVC），因此某些元素可能会呈现为文本而不是输入标记，因为它们对于该屏幕可能是只读的。我正在尝试为标签标签添加宽度以整理表单并对齐值/值框，但似乎只有在浮动它们时才能做到这一点（对吗？）。当我在标签标记之后呈现值时，这可以正常工作，但如果值为空白，则左浮动似乎与前一个标签堆叠，即使两者都包含在 p 标记中（这些应该是块级的，是吗？）。如果有的话，我做错了什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /><title>

    Edit

</title>
        <!-- Next Style Section Is Just To Set Up Classes, it will be moved to .CSS file -->
        <style type="text/css">
            div.FieldGroup {background-color: Blue; }
            p.Field { display: block; }
            span.NoteHeader { font-style: italic;}
            label { float: left; width: 150px;} 
        </style>
</head>

<body>
  <div id="main">


    <h2>Edit</h2>



    <form action="" method="post">
        <div id="MainSection" class="FieldGroup">
            <fieldset>
                <legend>Person Identification</legend>
                <p class="Field">
                    <label>Name:</label>
                    Name
                </p>
                <p class="Field">
                    <label for="Colour">ChildStatus:</label>
                    <select id="Colour" name="Colour">
                        <option value="10">Red</option>
                        <option value="20">Yellow</option>
                        <option selected="selected" value="30">Orange</option>
                    </select>
                </p>
                <p class="Field">
                    <label for="Age">Age:</label>
                    <input id="Age" name="Age" type="text" value="" />

                </p>
                <p class="Field">
                    <label>Birthplace:</label>
                </p>
                <p class="Field">
                    <label for="Reference">Reference:</label>
                    <input id="Reference" name="Reference" type="text" value="" />
                </p>
            </fieldset>
        </div>
    </form>
  </div>

</body>
</html>

干杯

（P.S. - 我无法添加只读文本框来包含这些空白，因为如果他们无法更改值，他们需要纯文本）

【问题讨论】：

您将标签/输入包装在段落元素中的任何原因？这可能工作正常，但从语义上讲它们不应该是 div 吗？也许我想太多了，但我能想到的一件事是你会想要在 p.Field 样式中显式设置很多无聊的样式值，因为浏览器都会向 p 标签添加不同的东西（边距和填充特别是）并且很少有任何一个浏览器在这方面是相同的。至少对于 div，您知道大多数浏览器应该将其视为仅所有样式默认为 0 或空白的容器。
我已经改了试试，但对问题没有任何影响。

标签： css forms

【解决方案1】：

将 clear:both 添加到您的 p.Field 声明中：

p.Field { 
   display: block; 
   clear: both; 
}

【讨论】：

谢谢，其他表单上的其他人建议清除：左，这似乎就足够了。
我把ps改成div，效果好很多（ps是VS的默认设置）

【解决方案2】：

在标签的 css 中添加 clear:left 属性。

【讨论】：

这个不行，表示后面的输入框移动到了上一行的末尾

【解决方案3】：

您不需要浮动labels 来设置它们的宽度，您只需将它们的display 更改为block。如果你浮动它们，它们包含的p 块将不会扩展到包围它们，除非给出hidden 或auto 的overflow。清除 label 也可以防止它们堆叠，但这完全取决于您想要的外观。

【讨论】：