居中输入和文本区域不匹配

Question

试图将两个输入并排居中，并在其下方放置一个文本区域

form ul {
  list-style: none;
  text-align: center;
}
form ul li {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
#nameform,
#emailform,
#messageform {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-color: #cfcfcf;
  font-size: 15px;
  border: 1px solid #ccc;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 4px 7px;
  outline: 0;
  -webkit-appearance: none
}
#nameform,
#emailform {
  margin-left: auto;
  margin-right: auto;
  height: 35;
}
#messageform {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

<div id="contactform">
  <form>

    <ul>
      <li>
        <input type="text" name="name" placeholder="name" id="nameform" size="35"></input>
      <li>
      <li>
        <input type="text" name="email" placeholder="email" id="emailform" size="35">
        </innput>
      <li>
    </ul>

    <textarea type="text" name="message" placeholder="Message" id="messageform" rows="4" cols="80"></textarea>
  </form>

</div>

由于某种原因，它在Google和IE上显示为：

我该怎么做，使文本区域完全位于两个输入下方的中心？

Answer 1

您有一些语法错误，我做了一些小的更改https://jsfiddle.net/DIRTY_SMITH/fedz7nx7/2/

form ul{
 list-style: none;
 text-align:center;
}

form ul li {
 display: inline-block;
 margin-left: auto;
 margin-right: auto;
}


#nameform, #emailform, #messageform {
 font-family: 'Open Sans', sans-serif;
 font-weight: 300;
 font-color: #cfcfcf; 
 font-size: 15px;
 border: 1px solid #ccc;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 padding: 4px 7px;
 outline: 0;
 -webkit-appearance: none
}

#nameform, #emailform {
  margin-left: auto;
  margin-right: auto;
  height: 35;
}

#messageform {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

Answer 2

许多语法错误，许多不必要的设置（以及某些用于样式设置的必需设置，但对于解决问题不是必需的。

以下是我如何解决此问题的方法。

form ul {
  list-style: none;          /* Remove bullets */
  margin: 0;                 /* Remove list spacing */
  font-size: 0;              /* Remove white-space between inline-block tags */
  padding: 5px;              /* A little bit of spacing */
}
form ul li {
  display: inline-block;     /* Allow the list items to be on the same line */
  width: 50%;                /* list items should be half-width */
  box-sizing: border-box;    /* Declared sizes should include padding */
  padding: 5px;              /* A little bit of spacing */
}
form ul li:nth-child(3) {
  width: 100%;               /* The third list item should be full-width */
}
form ul li input,
#messageform {
  width: 100%;               /* the inputs and textarea should be full-width */
  box-sizing: border-box;    /* Declared sizes should include padding */
}

/* Environment */ body { margin: 0; }

<div id="contactform">
  <form>
    <ul>
      <li>
        <input type="text" name="name" placeholder="name" id="nameform">
      </li>
      <li>
        <input type="text" name="email" placeholder="email" id="emailform">
      </li>
      <li>
        <textarea type="text" name="message" placeholder="Message" id="messageform" rows="4"></textarea>
      </li>
    </ul>
  </form>
</div>