form {
  /* 居中表单 */
  margin: 0 auto;
  width: 600px;
  /* 显示表单的轮廓 */
  padding: 2em;
  border: 2px solid #CCC;
  border-radius: 2em;
}

form.wide {
  width: 1000px;
}

form div+div {
  margin-top: 2em;
}

label {
  /* 确保所有label大小相同并正确对齐 */
  font: 2em monospace;
  display: inline-block;
  width: 180px;
  text-align: right;
}

input,
textarea {
  /* 确保所有文本输入框字体相同
       textarea默认是等宽字体 */
  font: 1em sans-serif;

  /* 使所有文本输入框大小相同 */
  width: 360px;
  box-sizing: border-box;

  /* 调整文本输入框的边框样式 */
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  /* 给激活的元素一点高亮效果 */
  border-color: #000;
}

textarea {
  /* 使多行文本输入框和它们的label正确对齐 */
  vertical-align: top;
  width: 760px;

  /* 给文本留下足够的空间 */
  height: 10em;
}

.button {
  /* 把按钮放到和文本输入框一样的位置 */
  padding-left: 180px;
  /* 和label的大小一样 */
}

button {
  /* 这个外边距的大小与label和文本输入框之间的间距差不多 */
  margin-left: .10em;
}