Question

我的联系表单的CSS存在问题。我已经删除了我的CSS，所以它没有乱七八糟的干净。

我希望输入字段为全宽和块。我还希望在同一行上彼此相邻的全宽的50％处的名字和姓氏。

非常感谢支持！

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我想如果你在名字和姓氏输入之间取出<br>，你就会把它们放在同一行。

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

Answer 2

您必须关闭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 3

首先，删除名字和名字之间的中断<br />。然后将宽度设置为50％，如下所示：

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

或

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

注意：我不确定代码，因为我使用了一个不太可靠的调试器，即我的眼睛

Answer 4

在你的css选择器中使用div并不是必需的，我使用了一些类似于bootstrap的表单输入的类。我建议你学习使用像Bootstrap这样的框架，它会帮助你完成这类事情。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

联系表格的CSS问题

4 个答案: