Question

这是 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标签并输入结果更改：

怎么了？有没有我应该使用的黑客？

如何将标签/输入放在盒子里面？

感谢所有投入，谢谢。

Answer 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>

BTW，请查看：How to create perfect form Markup and style it with CSS

Answer 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>

Answer 3

首先，您需要重置<p>元素

上的填充和边距

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

其次，你是一个块元素中的浮动元素，而不会在以后清除它们...因此溢出问题......这里是代码http://jsbin.com/eheva3的工作版本

注意：我使用了需要额外标记的clearit方法你可以使用那个或“clearfix”方法... google for“clearfix”来了解更多

Answer 4

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

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

您不需要添加更多div和段落来使其捕捉到网格，只需设置已存在的元素的样式。

表单和CSS的问题

4 个答案: