消息框显示在右栏中

Question

我想设计响应式联系表单，其中布局是名称，电子邮件，主题字段在一列中，而消息字段在另一列中。虽然我使用了width as 50%，但我无法将该消息字段显示在另一列中。这是演示

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

代码

＆＃13;

＆＃13;

#responsive-form {
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.form-row {
  width: 100%;
}

.form-row input {
  margin: 10px 0;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.button {
  float: left;
  background: #CA0002;
  color: #fff;
  text-transform: uppercase;
  border: none;
  padding: 8px 20px;
  cursor: pointer;
}

input[type="text"],
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box
}

.half-size {
  width: 50%;
}

＆＃13;

<div id="responsive-form" class="clearfix">
  <div class="half-size">
    <div class="form-row">
      <div class="column">
        <input type="text" name="name" class="form-control">
      </div>
    </div>
    <div class="form-row">
      <div class="column">
        <input type="text" name="name" class="form-control">
      </div>
    </div>
    <div class="form-row">
      <div class="column">
        <input type="text" name="name" class="form-control">
      </div>
    </div>
    <div class="form-row">
      <div class="column">
        <input type="text" name="name" class="form-control">
      </div>
    </div>
  </div>
  <div class="half-size">
    <div class="form-row">
      <div class="column">
        <textarea class="form-control" cols="40" rows="10"></textarea>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="column">
      <input type="submit" name="name" class="button">
    </div>
  </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这就是我想要的左列提交按钮

Answer 1

您需要将容器设置为显示：inline-block，因为默认情况下它们是块级元素，并且不允许其他容器位于它们旁边。

我使用45％因为50％+ 50％在使用内联块时通常不是100％因为空白有问题，有some ways around it，我会让你自己决定哪个黑客使用......

#responsive-form {
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.form-row {
  width: 100%;
}

.form-row input {
  margin: 10px 0;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.button {
  float: left;
  background: #CA0002;
  color: #fff;
  text-transform: uppercase;
  border: none;
  padding: 8px 20px;
  cursor: pointer;
}

input[type="text"],
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box
}

.half-size {
  width: 45%;
  display:inline-block;
}

<div id="responsive-form" class="clearfix">
  <div class="half-size">
    <div class="form-row">
      <div class="column">
        <input type="text" name="name" class="form-control">
      </div>
    </div>
    <div class="form-row">
      <div class="column">
        <input type="text" name="name" class="form-control">
      </div>
    </div>
    <div class="form-row">
      <div class="column">
        <input type="text" name="name" class="form-control">
      </div>
    </div>
    <div class="form-row">
      <div class="column">
        <input type="text" name="name" class="form-control">
      </div>
    </div>
  </div>
  <div class="half-size">
    <div class="form-row">
      <div class="column">
        <textarea class="form-control" cols="40" rows="10"></textarea>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="column">
      <input type="submit" name="name" class="button">
    </div>
  </div>
</div>
</div>

Answer 2

如果有列，请使用 flexbox 。

输入和textarea宽度单位为vw，例如min-width: 180px。

实施例

body {
  margin: 0;
}

::placeholder,
input[type="submit"] {
  color: #BACEE7;
  font-weight: bold;
}

.form {
  display: flex;
  justify-content: center;
  padding: 15px;
}

.form input,
.form textarea {
  min-width: 180px;
  background: #F2F2F2;
  border: 1px solid #ccc;
  text-transform: uppercase;
  border-radius: 3px;
  text-align: center;
  box-sizing: border-box;
}

.form>.inputs {
  margin-right: 5px;
}

.form>.inputs>input {
  width: 30vw;
  display: block;
  margin-bottom: 5px;
  padding: 1.5vw;
}

.form>.inputs>input:last-child {
  margin-bottom: 0 !important;
}

.form textarea {
  width: 35vw;
  padding-top: 80px;
  display: block;
  height: 100%;
}

.form input[type="submit"] {
  background: #CA0002;
  color: white;
  border: none;
  cursor: pointer;
}

<div class="form">
  <div class="inputs">
    <input type="text" name="first_name" placeholder="first name">
    <input type="text" name="last_name" placeholder="last name">
    <input type="email" name="email" placeholder="email">
    <input type="text" name="organization" placeholder="organization">
    <input type="tel" name="phone" placeholder="phone">
    <input type="submit" name="submit">
  </div>
  <div class="textarea">
    <textarea name="" id="" cols="30" placeholder="message"></textarea>
  </div>
</div>