我有一个表单，我正在尝试对其进行语义布局并使用 CSS 进行格式化。由于它是动态生成的(来自 ASP.NET MVC)，一些元素可能会呈现为文本而不是输入标签，因为它们对于该屏幕可能是只读的。我正在尝试为标签标签添加宽度以整理表单并对齐值/值框，但似乎只有在 float 它们时我才能这样做(正确吗？)。当我在 label 标签之后呈现值时，这工作正常，但如果该值为空白，则左浮动似乎与前一个标签堆叠在一起，即使两者都包含在 p 标签中(这些应该是 block 级的，是吗？)。如果有的话，我做错了什么？
<!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
(附:我不能添加只读文本框来包含这些空白，因为如果它们不能更改值，它们需要纯文本)
最佳答案
将 clear:both 添加到您的 p.Field 声明中:
p.Field {
display: block;
clear: both;
}
关于CSS - 使用 label 标签格式化表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1312971/