关于联系表格的CSS问题
问题描述:
我有一个联系表格的CSS问题。我已经删除了我的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>
答
您必须关闭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
答
首先,去掉休息,<br />
,将姓和名之间。然后设置宽度为50%这样的:
.firstname, .lastname { width: 50%; display: inline-block; }.
或
input[name=FNAME], input[name=LNAME] { width: 50%; display: inline-block; }
注意:我不知道的代码,因为我用一个不多少可靠调试器即我的眼睛
答
这不是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>
'textarea'不是autoclosed应答器.. –
你不介意使用像引导现有的CSS框架之一?这会让你的生活变得轻松。 – Marcel
- 关闭你的textarea这样的 –