關於聯繫表格的CSS問題

Question

我有一個聯繫表格的CSS問題。我已經刪除了我的CSS，所以它乾淨沒有混亂。

我希望輸入字段是全寬和塊。我也想要在同一行上相互鄰接的全寬度的50％的名字和姓氏。

支持將不勝感激！

div.name, 
 
div.email, 
 
div.organisation, 
 
div.phone-number, 
 
div.hear, 
 
div.enquiry, 
 
div.footer { 
 
    max-width: 600px; 
 
    margin: auto; 
 
}

<div class="name" id="name"> 
 
    <input type="text" size="1000" value="" name="FNAME" class="first-name" placeholder="First Name" tabindex="601" /> 
 
    <br> 
 

 
    <input type="text" value="" name="LNAME" class="last-name" placeholder="Last Name" tabindex="602" /> 
 
    <br> 
 
</div> 
 

 
<div class='email'> 
 
    <input type="email" value="" name="EMAIL" class="email" placeholder="Email Address" tabindex="603" /> 
 
    <br> 
 
</div> 
 

 
<div class='organisation'> 
 
    <input type="text" value="" name="ORGANISATI" class="organisation" placeholder="What organisation are you representing?" tabindex="604" /> 
 
    <br> 
 
</div> 
 

 
<div class='phone-number'> 
 
    <input type="text" value="" name="NUMBER" class="number" placeholder="Phone Number" tabindex="605" /> 
 
    <br> 
 
</div> 
 

 
<div class="hear"> 
 
    <select name="HEAR" class="required" id="mce-HEAR"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
    <option value="6">6</option> 
 
    <option value="7">7</option> 
 
    </select> 
 
</div> 
 

 
<div class="enquiry"> 
 
    <textarea name="ENQUIRY" cols="60" rows="10" class="required" placeholder="What is your enquiry?" tabindex="607" /> 
 
    <br> 
 
</div> 
 
<br> 
 

 
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
 

 
<div class="footer"> 
 
    <input type="submit" value="Send" name="subscribe" class="submit om-trigger-conversion" /> 
 
</div> 
 
</form>

Answer 1

您必須關閉textarea標籤，請更新此代碼：

<div class="enquiry"> 
    <textarea name="ENQUIRY" cols="60" rows="10" class="required" placeholder="What is your enquiry?" tabindex="607" /> 
<br> 

到：

<div class="enquiry"> 
    <textarea name="ENQUIRY" cols="60" rows="10" class="required" placeholder="What is your enquiry?" tabindex="607" /></textarea> 
<br> 

簡約風格這種形式：Here

Answer 2

首先，去掉休息，<br />，將姓和名之間。然後設置寬度爲50％這樣的：

.firstname, .lastname { width: 50%; display: inline-block; }.

或

input[name=FNAME], input[name=LNAME] { width: 50%; display: inline-block; }

注意：我不知道的代碼，因爲我用一個不多少可靠調試器即我的眼睛

Answer 3

我認爲如果你在名字和姓氏輸入之間取出<br>，你會得到它們在同一行。

http://jsbin.com/bitaha/edit?html,css,output

Answer 4

這不是necesarry在你的CSS選擇器來使用DIV，我已經使用了類似的自舉的表單輸入一些類。我建議你學習使用像Bootstrap這樣的框架，它可以幫助你解決這類問題。

textarea { 
 
    max-width: 600px; 
 
} 
 
.form-group { 
 
    max-width: 600px; 
 
} 
 
.form-control { 
 
    box-sizing: border-box; 
 
    margin-bottom: 10px; 
 
    display: block; 
 
    width: 100%; 
 
    padding: 6px 12px; 
 
    font-size: 14px; 
 
    color: #555; 
 
    background-color: #fff; 
 
    background-image: none; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
 
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s 
 
} 
 
.form-control.inline { 
 
    display: inline-block; 
 
    width: 50%; 
 
    float: left; 
 
} 
 
.btn { 
 
    display: inline-block; 
 
    padding: 6px 12px; 
 
    margin-bottom: 0; 
 
    font-size: 14px; 
 
    font-weight: 400; 
 
    line-height: 1.42857143; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
    -ms-touch-action: manipulation; 
 
    touch-action: manipulation; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px; 
 
} 
 
.btn-default { 
 
    color: #333; 
 
    background-color: #fff; 
 
    border-color: #ccc; 
 
    width: 100%; 
 
} 
 
.btn-default:hover, 
 
.btn-default:focus, 
 
.btn-default:active { 
 
    color: #333; 
 
    background-color: #e6e6e6; 
 
    border-color: #adadad; 
 
}

<form> 
 
    <div class="form-group"> 
 

 
    <div class="name" id="name"> 
 
     <input type="text" value="" name="FNAME" class="first-name form-control inline" placeholder="First Name" tabindex="601" /> 
 

 
     <input type="text" value="" name="LNAME" class="last-name form-control inline" placeholder="Last Name" tabindex="602" /> 
 
    </div> 
 

 
    <div class="email"> 
 
     <input type="email" value="" name="EMAIL" class="email form-control" placeholder="Email Address" tabindex="603" /> 
 
    </div> 
 

 
    <div class='organisation'> 
 
     <input type="text" value="" name="ORGANISATI" class="organisation form-control" placeholder="What organisation are you representing?" tabindex="604" /> 
 
    </div> 
 

 
    <div class='phone-number'> 
 
     <input type="text" value="" name="NUMBER" class="number form-control" placeholder="Phone Number" tabindex="605" /> 
 
    </div> 
 

 
    <div class="hear"> 
 
     <select name="HEAR" class="required form-control" id="mce-HEAR"> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
     <option value="5">5</option> 
 
     <option value="6">6</option> 
 
     <option value="7">7</option> 
 
     </select> 
 
    </div> 
 

 
    <div class="enquiry"> 
 
     <textarea name="ENQUIRY" cols="60" rows="10" class="required form-control" placeholder="What is your enquiry?" tabindex="607"></textarea> 
 
    </div> 
 
    <br> 
 

 
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
 

 
    <div class="footer"> 
 
     <input type="submit" value="Send" name="subscribe" class="submit om-trigger-conversion btn btn-default" /> 
 
    </div> 
 
    </div> 
 
</form>