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;

}

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;

}

input [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;

}

4

1 に答える 1

1

完全に正確ではなかったので、この回答を編集しました。まず、CSSでIDによってdivを識別する方法は、その前に「＃」文字を配置することです。

floatを使用する場合は、要素を配置する順序が関係します。右側の要素を最初に作成するとき、要素は、右側から、収まらないまで、隣り合って配置されます。この場合（左側のテキストエリアが作成されていないため）、それを含むdivの反対側に到達すると停止します。

最初に左側のテキストエリアを作成すると、右側のフローティング要素を並べて配置できないため、それらは互いに下に配置されます。

親のマージン、幅、幅を常に覚えておく必要があります。

コードでは、次のようになり ます。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 に答える