CSSと別フォーム

Question

フォームを2つに分ける必要があります。 1つのサイトの3つのフィールドともう1つのフィールドと送信ボタン。私はボタンのためのexept "contactform"と呼ばれるすべてのクラスを彼らに与えました。私はdrupalで作業しています。つまり、私はCSSでしか動作しません。だから、他のHTMLタグをinputfields以外のクラスに追加することはできません。

What i have

What i'm trying to achieve

私が提供できる唯一のコードは、私が

私は以下のコメントでで投稿しますので、私はここに投稿カントれ、「要素を点検し、」内部のHTMLコードです皆さん、これで私を助けてくれてありがとうと願っています。

これは私があなたに与えることができるものです。コードのその全体の混乱が、私が行うことができ、より何もありません：テキストエリアの表示を与える

<form class="webform-client-form webform-client-form-14" action="/drupal/contact-0" method="post" id="webform-client-form-14" accept-charset="UTF-8"><div><div class="form-item webform-component webform-component-textfield webform-component--naam form-group form-item form-item-submitted-naam form-type-textfield form-group"><input required="required" placeholder="Uw naam" class="contactform form-control form-text required" type="text" id="edit-submitted-naam" name="submitted[naam]" value="" size="50" maxlength="40" /> <label class="control-label element-invisible" for="edit-submitted-naam">Naam <span class="form-required" title="This field is required.">*</span></label> 
</div><div class="form-item webform-component webform-component-email webform-component--email form-group form-item form-item-submitted-email form-type-webform-email form-group"><input required="required" class="email contactform form-control form-text form-email required" placeholder="Uw emailadres" type="email" id="edit-submitted-email" name="submitted[email]" size="50" /> <label class="control-label element-invisible" for="edit-submitted-email">Email <span class="form-required" title="This field is required.">*</span></label> 
</div><div class="form-item webform-component webform-component-textfield webform-component--onderwerp form-group form-item form-item-submitted-onderwerp form-type-textfield form-group"><input required="required" placeholder="Uw onderwerp" class="contactform form-control form-text required" type="text" id="edit-submitted-onderwerp" name="submitted[onderwerp]" value="" size="50" maxlength="255" /> <label class="control-label element-invisible" for="edit-submitted-onderwerp">Onderwerp <span class="form-required" title="This field is required.">*</span></label> 
</div><div class="form-item webform-component webform-component-textarea webform-component--bericht form-group form-item form-item-submitted-bericht form-type-textarea form-group"><div class="form-textarea-wrapper"><textarea required="required" placeholder="Uw bericht" class="contactform2 form-control form-textarea required" id="edit-submitted-bericht" name="submitted[bericht]" cols="50" rows="5"></textarea></div> <label class="control-label element-invisible" for="edit-submitted-bericht">Bericht <span class="form-required" title="This field is required.">*</span></label> 
</div><input type="hidden" name="details[sid]" /> 
<input type="hidden" name="details[page_num]" value="1" /> 
<input type="hidden" name="details[page_count]" value="1" /> 
<input type="hidden" name="details[finished]" value="0" /> 
<input type="hidden" name="form_build_id" value="form-4vEZg04Y8Zevfr2GC6ONWVw8UI_4vxf3AL8NRrCFWtg" /> 
<input type="hidden" name="form_token" value="gNUgTXDR4TC0WhrHOwB7IaYOMOR6Nxz01qjuvrsVPPQ" /> 
<input type="hidden" name="form_id" value="webform_client_form_14" /> 
<div class="form-actions"><button class="webform-submit button-primary btn btn-primary form-submit" type="submit" name="op" value="Submit">Submit</button> 
</div></div></form> 
</section> 

CSS

.webform-client-form-14 { 
float: left; 
width: 45%; 
margin-top: 20px; 
margin-bottom: 30px; 
} 

.contactform { 
border-radius: 0; 
border: none; 
} 

Answer 1

のtry：ブロック;

Answer 2

問題は、フォーム全体を45％幅に設定することですが、その内部の要素の幅を45％にしたいだけです。 htmlにラッパーを追加することができない場合は、:nth-child(n) CSSセレクターまたはフィールドグループのカスタムクラス（例：.webform-component--bericht）を使用して、各入力グループを1つずつターゲットにする必要があります。

例：

.webform-client-form-14 .form-item:nth-child(1) { 
    width:45%; 
    display:block; 
    float:left; 
}