如何将3个元素正好悬浮在另一个上面，一个左边？

Question

我想将右侧的3个输入元素对齐，彼此相对。而左边的文本区域。就像这样：http://cl.ly/Gvzo 我如何使它工作？

<div id="contact">
<form action="php/contact/contactengine.php" method="post">
<fieldset>

<input id="Name" name="Name" placeholder="Enter your full name" type="text">                        

<input id="Email" name="Email" placeholder="Enter your email address" type="email">

<input type="submit" name="submit" value="Send your message">                              

<textarea id="message" name="Message" placeholder="What's on your mind?"></textarea>

</fieldset>
</form>
</div>

我的CSS：

联系{

width: 670px;

}

输入{

float:right;
width: 251px; 
height: 50px; 
padding: 0px 20px 0px 20px; 
margin: 0 0 20px 0;   
background: #fcfcfc;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border:1px solid #d6d6d6;
box-shadow:inset 0 0 4px #d6d6d6;
-moz-box-shadow-inset: inset 0 0 4px #d6d6d6;
-webkit-box-shadow: inset 0 0 4px #d6d6d6;
font-size: 13px; 
font-weight:bold; 
color: #2a2a2a;  

}

textarea {

float:left;
width: 251px; 
height: 170px; 
padding: 12px 20px 12px 20px; 
margin: 0px; 
background: #fcfcfc;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border:1px solid #d6d6d6;
box-shadow:inset 0 0 4px #d6d6d6;
-moz-box-shadow-inset: inset 0 0 4px #d6d6d6;
-webkit-box-shadow: inset 0 0 4px #d6d6d6;
font-size: 13px;
font-weight:bold; 
color: #2a2a2a;  
resize:none;

}

输入[type = submit] {

float:right;
border:none;
font-size:16px;
width: 293px; height: 51px;
float: right; 
padding: 7px 20px 10px 10px; 
margin:0px;
background: url(../../img/contactsendbutton.png) no-repeat;
cursor: pointer;
color:#fff;
text-shadow:1px 1px 1px #000;

}

Answer 1

我编辑了这个答案，因为它并不完全准确。 首先，你在CSS中通过ID识别div的方法是在它前面加一个'＃'字符。

使用float时，放置元素的顺序是相关的。当您首次在右侧创建元素时，它们将从右侧开始彼此相邻放置，直到它不适合为止。在这种情况下（由于尚未创建左侧textarea），它会在到达包含它的div的另一侧时停止。

如果您首先创建左侧textarea，则右侧浮动元素不能彼此相邻放置，因此它们将被放置在彼此之下。

您必须始终牢记其父级的边距，宽度和宽度。

在代码中它应该有点像这样： 的 HTML：

<div id="contact">
        <form action="php/contact/contactengine.php" method="post">
            <fieldset>

                    <textarea id="message" name="Message" placeholder="What's on your mind?"></textarea>

                    <input id="Name" name="Name" placeholder="Enter your full name" type="text">                        

                    <input id="Email" name="Email" placeholder="Enter your email address" type="email">

                    <input type="submit" name="submit" value="Send your message">



            </fieldset>
        </form>
    </div>

CSS：

  #contact {
        width: 670px;
        }

        input {
        float:right;
        width: 251px; 
        height: 50px; 
        padding: 0px 20px 0px 20px; 
        margin: 10px;   
        background: #fcfcfc;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border:1px solid #d6d6d6;
        box-shadow:inset 0 0 4px #d6d6d6;
        -moz-box-shadow-inset: inset 0 0 4px #d6d6d6;
        -webkit-box-shadow: inset 0 0 4px #d6d6d6;
        font-size: 13px; 
        font-weight:bold; 
        color: #2a2a2a;  
        }

        textarea {

        float:left;
        width: 251px; 
        height: 170px; 
        padding: 12px 0px 12px 20px; 
        margin: 10px; 
        background: #fcfcfc;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border:1px solid #d6d6d6;
        box-shadow:inset 0 0 4px #d6d6d6;
        -moz-box-shadow-inset: inset 0 0 4px #d6d6d6;
        -webkit-box-shadow: inset 0 0 4px #d6d6d6;
        font-size: 13px;
        font-weight:bold; 
        color: #2a2a2a;  
        resize:none;
        }

        input[type=submit] {

        float:right;
        border:none;
        font-size:16px;
        width: 251px; height: 50px;
        float: right; 
        padding: 7px 20px 10px 10px; 
        margin:10px;
        background: url(../../img/contactsendbutton.png) no-repeat;
        cursor: pointer;
        color:#fff;
        text-shadow:1px 1px 1px #000;
        }