尝试将两个输入并排放置,并在其下方放置一个textarea
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>
&#13;
由于某种原因,它显示在谷歌和IE上,如下所示: Image showing inconsistent centering http://i62.tinypic.com/fnhdfo.jpg
我怎样才能使textarea完全位于两个输入的中心?
答案 0 :(得分: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;
}
答案 1 :(得分:0)
许多语法错误,许多不必要的设置(以及一些可能需要用于样式设置,但不是解决问题所必需的设置)。
以下是我如何解决这个问题。
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>