使用 SPAN 文本而不是输入或选择控件的表单样式答案

【问题标题】：Form Styling with SPAN text instead of input or select controls使用 SPAN 文本而不是输入或选择控件的表单样式
【发布时间】：2010-10-16 16:42:42
【问题描述】：

我有 CSS 可以格式化表单输入元素上方的标签，如果我只是显示只读数据，我想用数据库中的文本替换输入元素。

无论我做什么，将输入字段更改为 span 或 asp:label 都不会正确呈现文本上方的标签。

我正在使用这个 CSS：

div.formRow {
   padding: 2px 0px;
}

span.formItem {
    display: inline-block;
    position: relative;
    padding: 0px 5px;
}
span.formItem label {
    position: absolute;
    left: 5px;
    top: 0px;
}
span.formItem input, span.formItem select {
    margin-top: 20px;
}

【问题讨论】：

您能否也给我们一个您尝试设置样式的渲染 HTML 示例？谢谢。

标签： asp.net css forms styling

【解决方案1】：

我猜您需要将display: block 添加到输入字段替换范围。

【讨论】：

我假设您在“margin-top: 20px;”中添加了“span.formItem span”左右规则？ Span 是内联元素，垂直边距不适用于这些元素 (w3.org/TR/CSS21/box.html#margin-properties)，因此除非您确保 span 是块级元素，否则上边距不起作用。