Question

所以我无法弄清楚为什么我的div与我希望他们定位的方式重叠。我正在尝试制作一个包含一个溢出div侧面的标题的表单，但无济于事。我附上了一张照片，以便您可以想象我想要完成的事情。它只是不对劲。

What I'm trying to make

使用以下HTML创建表单框：

<div class="container">
                <div class="row">


                    <div class="span4 featured">    
                        <h2 class="feature-title">It's Never Been Easier!
                            <p>Create Your Free Profile Now!</p></h2>
                        <form action="send-mail.php" method="post" id="contact-form">

                            <input type="text" value="Full Name" name="name" class="required">
                            <input type="text" value="Email Address" name="email" class="required email">
                            <input type="text" value="Username" name="username">
                            <input type="text" value="Password" name="password">
                            <input type="submit" name="subscribe" value="JOIN FREE">
                        </form>
                    </div>

和CSS：

.featured form input[type="submit"] {
    background: #3097be;
    color: #ffffff;
    width: 100%;
    margin-bottom: 0px;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    -webkit-transition: background linear .2s;
    -moz-transition: background linear .2s;
    -o-transition: background linear .2s;
    padding-left: 20intro .container {
    padding-top: 0px;
}

.featured {
    min-height: 500px;
    float: right;
    margin-top: -900px;
    margin-bottom: 30px;
}

.featured h2 {
        font-size: 24px;
        overflow: visible;
    background: url(http://i.imgur.com/oP8bXR7.png) center no-repeat;
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    -o-border-radius: 0px; 
    border-radius: 0px;
    padding: 20px 0px 5px 30px;
    color: black;
    margin-bottom: 0px;
}

.featured form {
    background: url(http://i.imgur.com/swcwFW6.png) center no-repeat;
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    -o-border-radius: 0px; 
    border-radius: 0px;
    padding: 20px 30px 30px 30px;
    margin-top: -20px;
}

.featured p {
    color: blue;
    text-align: center;

}

.featured form input{
    width: 225px;
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    -o-border-radius: 0px; 
    border-radius: 0px;
    border: none;
    padding: 3px 9px 3px 9px;
    color: #bebebe;
    box-shadow: none;
    font-family: 'Lato', sans-serif;
    margin-bottom: 20px;
    -webkit-transition: background linear .2s,color linear .2s;
    -moz-transition: background linear .2s,color linear .2s;
    -o-transition: background linear .2s,color linear .2s;
}

.featured form textarea {
    width: 200px;
    height: 70px;
    background: #474747;
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    -o-border-radius: 0px; 
    border-radius: 0px;
    border: none;
    padding: 12px 20px 12px 20px;
    color: #bebebe;
    box-shadow: none;
    font-family: 'Lato', sans-serif;
    margin-bottom: 30px;
    -webkit-transition: background linear .2s,color linear .2s;
    -moz-transition: background linear .2s,color linear .2s;
    -o-transition: background linear .2s,color linear .2s;
}

Answer 1

我不认为你的html标记能够有效地为你提供你想要的视觉效果。同时查找语义HTML，你不应该在标题（h2）标签内有一个段落（p）标签 - 它们的名称完全不同于其名称。

您可以尝试这样的HTML：

<div class="span4 featured">
    <div class="feature-title">    
    <h2>It's Never Been Easier!</h2>
    <p>Create Your Free Profile Now!</p>
    </div>
    <form action="send-mail.php" method="post" id="contact-form"></form>
</div>

然后你可以向左和右应用负边距：

.feature-title {margin: 0 -20px}

当然有许多方法可以给猫皮肤涂抹，有六种方法可以达到你想做的目的

Answer 2

一些普通的格式和一些遗漏的标签，最大的问题似乎是900px的负余量。由于某种原因，感觉不到。它将整个事物移到页面顶部。当我第一次将代码弹出到Dreamweaver中时，我甚至看不到表单。否则，为了简单地将输入字段设置为堆栈，我建议将它们设置为display: block;，并且它们应该各自得到它们自己的行。一个简单的margin: 0 auto;或在您的情况margin 0 auto 20px;（只要左右边距设置为自动）将使其保持居中。

我的测试文档的全部内容如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    .featured form input[type="submit"] {
        background: #3097be;
        color: #ffffff;
        width: 100%;
        margin-bottom: 0px;
        font-size: 20px;
        font-family: 'Open Sans', sans-serif;
        -webkit-transition: background linear .2s;
        -moz-transition: background linear .2s;
        -o-transition: background linear .2s;
        padding-left: 20intro;
    }
    .container {
        padding-top: 0px;
    }

    .featured {
        min-height: 500px;
        float: right;
        margin-bottom: 30px;
    }

    .featured h2 {
        font-size: 24px;
        overflow: visible;
        background: url(http://i.imgur.com/oP8bXR7.png) center no-repeat;
        -webkit-border-radius: 0px; 
        -moz-border-radius: 0px; 
        -o-border-radius: 0px; 
        border-radius: 0px;
        padding: 20px 0px 5px 30px;
        color: black;
        margin-bottom: 0px;
    }

    .featured form {
        background: url(http://i.imgur.com/swcwFW6.png) center no-repeat;
        -webkit-border-radius: 0px; 
        -moz-border-radius: 0px; 
        -o-border-radius: 0px; 
        border-radius: 0px;
        padding: 20px 30px 30px 30px;
        margin-top: -20px;
    }

    .featured p {
        color: blue;
        text-align: center;

    }

    .featured form input{
        display: block;
        width: 225px;
        -webkit-border-radius: 0px; 
        -moz-border-radius: 0px; 
        -o-border-radius: 0px; 
        border-radius: 0px;
        border: none;
        padding: 3px 9px 3px 9px;
        color: #bebebe;
        box-shadow: none;
        font-family: 'Lato', sans-serif;
        margin: 0 auto 20px;
        -webkit-transition: background linear .2s,color linear .2s;
        -moz-transition: background linear .2s,color linear .2s;
        -o-transition: background linear .2s,color linear .2s;
    }

    .featured form textarea {
        width: 200px;
        height: 70px;
        background: #474747;
        -webkit-border-radius: 0px; 
        -moz-border-radius: 0px; 
        -o-border-radius: 0px; 
        border-radius: 0px;
        border: none;
        padding: 12px 20px 12px 20px;
        color: #bebebe;
        box-shadow: none;
        font-family: 'Lato', sans-serif;
        margin: 0 auto 30px;
        -webkit-transition: background linear .2s,color linear .2s;
        -moz-transition: background linear .2s,color linear .2s;
        -o-transition: background linear .2s,color linear .2s;
    }
</style>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="span4 featured">    
            <h2 class="feature-title">It's Never Been Easier!</h2>
            <p>Create Your Free Profile Now!</p>
            <form action="send-mail.php" method="post" id="contact-form">

                <input type="text" value="Full Name" name="name" class="required">
                <input type="text" value="Email Address" name="email" class="required email">
                <input type="text" value="Username" name="username">
                <input type="text" value="Password" name="password">
                <input type="submit" name="subscribe" value="JOIN FREE">
            </form>
        </div>
    </div>
</div>
</body>
</html>

编辑：我甚至没有注意到h2里面的p标签。我只专注于CSS。

Answer 3

尝试这样的事情：Demo

HTML：

<div class="container">
    <div class="header">
        <div>Its never...</div>
        <div>Create...</div>
    </div>
    <div class="form">
        <div class="input-item">
            <input name="input1" type="text" />
        </div>
        <div class="input-item">
            <input name="input2" type="text" />
        </div>
        <div class="input-item">
            <input name="input3" type="text" />
        </div>
        <div class="join">
            Join!
        </div>
    </div>
</div>

CSS：

.container {
    margin: 30px;
    background: gray;
    position: relative;
    width: 200px;
    padding-top: 60px;
}

.header {
    border: 1px solid black;
    background: white;
    position: absolute;
    top: 10px;
    left: -10px;
    width: 220px;
}

.form {
    background: darkgray;    
}

.input-item {
    margin: 5px;
}

.join {
    background: lightblue;
}

如何在表单框中将div叠加在一起？

3 个答案: