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

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>

出于某种原因，它在谷歌和 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;
}