Fatal编程技术网
  • css/
  • CSS-使用标签标记格式化表单

CSS-使用标签标记格式化表单

css forms

CSS-使用标签标记格式化表单,css,forms,Css,Forms,我有一个表单，我正试图用CSS进行语义布局和格式化。由于它是动态生成的（来自ASP.NET MVC），一些元素可能会呈现为文本而不是输入标记，因为它们对于该屏幕可能是只读的。我试图为标签标签添加一个宽度，以整理表单并对齐值/值框，但似乎只有在浮动它们时才能这样做（正确吗？）。当我在标签标记后渲染值时，这可以正常工作，但是如果值为空，则左浮动似乎与上一个标签堆叠，即使两者都包含在p标记中（应该是块级别，是吗？）。我做错了什么 <!DOCTYPE html PUBLIC "-//W3C//DT

我有一个表单，我正试图用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>


编辑
div.FieldGroup{背景色：蓝色；}
p、 字段{显示：块；}
span.NoteHeader{font-style:italic；}
标签{浮点：左；宽度：150px；}
编辑
人员识别


姓名：
名称




子女状况：
红色
黄色的
橙色




年龄：




出生地：




参考：
干杯

MH

（注意-我无法添加只读文本框来包含这些空格，因为如果无法更改值，它们需要纯文本）

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

将clear:两者都添加到p字段声明中：

p.Field { 
   display: block; 
   clear: both; 
}
您不需要浮动
标签来设置其宽度，只需将其
显示更改为
块
。但是，如果将它们浮动，则它们包含的
p
块将不会扩展以包围它们，除非给定
隐藏
或
自动
的
溢出
。清除
标签
也可以防止它们堆叠，但这完全取决于您想要的外观。
您将标签/输入包装在段落元素中的原因是什么？这可能行得通，但从语义上讲，它们不应该是div吗？也许我想得太多了，但我能想到的一件事是，你需要在p.字段样式中显式地设置很多无聊的样式值，因为浏览器都会在p标记中添加不同的内容（特别是边距和填充），而且很少有浏览器在这方面是相同的。至少对于一个div，你知道大多数浏览器应该只将其视为一个容器，所有样式默认值都为0或空白。我改变了这一点来尝试它，但这对问题没有任何影响。这不起作用，它意味着下面的输入框移到前一行的末尾谢谢，其他人在另一张表格上建议清楚：左，这似乎足够了。我将ps改为divs，效果更好（ps是VS的默认值）