2

我想将右侧的 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;

}

输入[类型=提交] {

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;

}

4

1 回答 1

1

我编辑了这个答案，因为它并不完全准确。首先，在 CSS 中通过 ID 识别 div 的方法是在其前面放置一个“#”字符。

使用浮动时放置元素的顺序是相关的。当您第一次在右侧创建元素时，它们会彼此相邻放置，从右侧开始，直到不合适为止。在这种情况下（因为尚未创建左侧文本区域），它会在到达包含它的 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;
        }
于 2012-05-28T00:07:12.887 回答