0
htmlとcssでフォームを作成しようとしています。私は、ピクセルではなくパーセンテージを使用しなければならないという印象を受けています。私は最小の幅などを使用しています。これは画像で最もよく記述されますので、ここで説明します。divを統一して、サイズ変更ウィンドウが表示されないようにします。
これは、その塩基形態である：私は、ウィンドウのサイズを操作するとき 
そして、ここでは、次のとおりです。 
もちろん、私は私のロゴが場所について側と全てにオフに行く必要はありませんここに描かれているように。そこで、divと入力フィールドのこの "結合"に関わる論理を理由にしようとする私の試みがここにあります。
ここには、フォームに含まれるhtmlがあります。マニュアルスタイリングがいくつかあります。そのため、私はそれを含めています。あなたは、私が左最小幅/最大幅、フロートのために行くことを試みた見ることができるようにこれを得るための秘密のテクニックは何ですかなど...
.email-container {
margin-bottom: 10%;
background: #FFFFFF;
min-height: 400px;
overflow: hidden;
padding: 2% 5%;
border-radius: 5px;
}
.icon-case {
width: 5%;
min-width: 5%;
float: left;
border-radius: 5px 0px 0px 5px;
background: #EEEEEE;
height: 42px;
text-align: center;
line-height: 40px;
}
input[type=text] {
border-radius: 0px 5px 5px 0px;
border: 1px solid #EEEEEE;
margin-bottom: 3%;
height: 40px;
float: left;
padding: 0 15px;
}
textarea {
padding: 15px;
border: 1px solid #EEEEEE;
border-radius: 5px;
margin: 0;
margin-bottom: 3%;
box-sizing: border-box;
resize: none;
float: left;
}
input:focus,
textarea:focus {
outline: none;
border: 1px solid #3684FF;
}
input[type=submit] {
padding: 8px 15px;
border-radius: 5px;
height: 37px;
cursor: pointer;
float: right;
background-color: none;
color: #3684FF;
border: 1px solid #EEEEEE;
}
input[type=submit]:hover {
background-color: #3684FF;
color: #FFFFFF;
border: none;
}
：ここ
<div class="email-container">
<h3 style="text-align: center; color: #3684FF">SEND ME AN EMAIL</h3>
<form id="contact-form" action="//formspree.io/[email protected]" method="POST">
<div class="form-group">
<span class="icon-case" id="iname">
<i class="fa fa-user" id="user"></i>
</span>
<input type="text" onfocus="chbgn('#3684FF');" onblur="outblurn();" id="name" name="name" placeholder="FULL NAME" style="width: 36%; max-width: 36%; margin-right: 7.5%;">
</div>
<div class="form-group">
<span class="icon-case" id="iemail">
<i class="fa fa-envelope" id="envelope"></i>
</span>
<input type="text" onfocus="chbge('#3684FF');" onblur="outblure();" id="email" name="email" placeholder="EMAIL ADDRESS" style="width: 36%; max-width: 37%;">
</div>
<div class="form-group">
<span class="icon-case" id="isubj">
<i class="fa fa-pencil" id="pencil"></i>
</span>
<input type="text" onfocus="chbgs('#3684FF');" onblur="outblurs();" id="subj" name="_subject" placeholder="SUBJECT" style="width: 90%; max-width: 90%; overflow: hidden;">
</div>
<textarea id="message" name="message" placeholder="SEND ME A MESSAGE . . ." style="height:150px; width:100%;"></textarea>
<input type="submit" id="send" value="SUBMIT">
<input type="hidden" name="_next" value="//example.com/thankyou.html" />
</form>
</div>
は、CSSの使用でありますきれいに凝縮するには？これはすべて体内で起きており、体の幅は60％です。