表单和 CSS 的问题答案

【问题标题】：Problems with Forms and CSS表单和 CSS 的问题
【发布时间】：2009-12-27 02:17:26
【问题描述】：

这是一个follow up to this question。我试图想出一个解决方案，使我能够以多列的形式使用内联标签，通过阅读上面提到的问题中提供的一些答案，我意识到它比我最初的简单得多不过，这是我的原型：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
    width: 16%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._30 {
    width: 26%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
label {
    border: 1px solid #B3B3B3;
    font-family: inherit;
    padding: 3px;
    width: 100%;
}
input {
    border: 1px solid #B3B3B3;
    font-family: inherit;
    padding: 3px;
    width: 100%;
}
.box {
    padding: 10px;
    margin: 10px 0px;
    background-color: #666;
}
.content {
    background-color: #FFFFFF;
    padding: 10px;
    -moz-border-radius: 6px;
}
</style>
</head>

<body>

<div class="box">
    <div class="content">
        <div class="_20">
            <p><label>Name:</label></p>
        </div>
        <div class="_30">
            <p><input type="text" id="" /></p>
        </div>
        <div class="_20">
            <p><label>Email:</label></p>
        </div>
        <div class="_30">
            <p><input type="text" id="" /></p>
        </div>
    </div>
</div>

</body>
</html>

理论上这似乎可行，但实际上我得到的只是这个非常奇怪的结果（在 FF 3.5.6 中）：

如果我将p 标签放在标签周围并输入结果会有所变化：

怎么了？有什么我应该利用的技巧吗？

如何将标签/输入按应有的方式放置在框内？

感谢所有输入，谢谢。

【问题讨论】：

为什么要在表单域中使用段落标签？
@NSD：我基于fluid960网格系统，该系统也在表单字段上使用p标签，不过我现在已经更新了问题。

标签： css forms webforms

【解决方案1】：

试试这个：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
    width: 16%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._30 {
    width: 26%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
label {
    border: 1px solid #B3B3B3;
    font-family: inherit;
    padding: 3px;
    width: 100%;
}
input {
    border: 1px solid #B3B3B3;
    font-family: inherit;
    padding: 3px;
    width: 100%;
}
.box {
    padding: 10px;
    margin: 10px 0px;
    background-color: #666;
}
.content {
    background-color: #FFFFFF;
    padding: 10px;
    -moz-border-radius: 6px;
   overflow:hidden;
}
</style>
</head>

<body>

<div class="box">
    <div class="content">
        <div class="_20">
                <p><label>Name:</label></p>
        </div>
        <div class="_30">
                <p><input type="text" id="" /></p>
        </div>
        <div class="_20">
                <p><label>Email:</label></p>
        </div>
        <div class="_30">
                <p><input type="text" id="" /></p>
        </div>
    </div>
</div>

</body>
</html>

顺便说一句，看看这个：How to create perfect form Markup and style it with CSS

【讨论】：

=) 感谢 Nimbuz 提供解决方案和链接。你很有帮助。
np :) 如果您还想支持 IE6，请确保为内容添加宽度。
只需将 width:100% 应用于 .content 就可以了。

【解决方案2】：

这是一个。最主要的是清楚：两者； div 位于底部，但还有一些其他内容也发生了变化。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
._20 {
    width: 16%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
._30 {
    width: 26%;
    display: inline;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
label {
    border: 1px solid #B3B3B3;
    font-family: inherit;
    padding: 3px;
    width: 100%;
}
input {
    border: 1px solid #B3B3B3;
    font-family: inherit;
    padding: 3px;
    width: 100%;
}
.box {
    padding: 10px;
    background-color: #666;
}
.content {
    background-color: #FFFFFF;
    -moz-border-radius: 6px;
}
</style>
</head>

<body>

<div class="box">
    <div class="content">
        <div class="_20">
                <label>Name:</label>
        </div>
        <div class="_30">
                <input type="text" id="" />
        </div>
        <div class="_20">
                <label>Email:</label>
        </div>
        <div class="_30">
                <input type="text" id="" />
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

</body>
</html>

【讨论】：

【解决方案3】：

首先您需要重置<p> 元素的内边距和边距

p,label{ 
 padding:0; 
 margin:0 
}

其次，您是在块元素内浮动元素而没有稍后清除它们...因此出现溢出问题...这是代码http://jsbin.com/eheva3的工作版本

注意：我使用了需要额外标记的clearit 方法
您可以使用该方法或“clearfix”方法...谷歌搜索“clearfix”以了解更多信息

【讨论】：

【解决方案4】：

您应该从最简单可行的实现开始，然后从那里构建您想要的任何花哨的样式。摆脱所有无关的标签，你真正需要的是：

<div class="box">
    <div class="content">
        <label>Name:</label>
        <input type="text" />
    </div>
</div>

您不需要添加更多的 div 和段落来使其与网格对齐，只需为已经存在的元素设置样式即可。

【讨论】：