css - 如何将 3 个元素相互 float ，一个向左浮动？

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;  

文本区域{

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 时，放置元素的顺序很重要。当您第一次创建右侧的元素时，它们会彼此相邻放置，从右侧开始，直到不适合为止。在这种情况下(因为尚未创建左侧文本区域)它会在到达包含它的 div 的另一侧时停止。

如果先创建左边的textarea，右边的 float 元素不能并排放置，所以它们会被放在一起。

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

在代码中应该是这样的: 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;
        }