Question

我有一个表单，我正在尝试在语义上进行布局并使用CSS格式化。由于它是动态生成的（来自ASP.NET MVC），因此某些元素可能会呈现为文本而不是输入标记，因为它们对于该屏幕可能是只读的。我试图在标签标签上添加一个宽度来对齐表格并对齐值/值框，但似乎我只能在浮动它们时这样做（这是正确的吗？）。当我在label标签之后渲染值时，这是正常的，但如果值为空，则左浮动似乎与前一个标签堆叠，即使两者都包含在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>

干杯

MH

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

Answer 1

在你的p.Field声明中添加clear：

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

Answer 2

将clear：left属性添加到标签的css。

Answer 3

您无需漂浮label以设置宽度，只需将display更改为block即可。如果您正在浮动它们，除非给出p overflow或hidden，否则它们包含的auto块不会展开以包围它们。清除label也可以防止它们堆叠，但这一切都取决于你想要的外观。

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

3 个答案: