我在我的页面（text, textarea, submit）上使用html表单输入来创建联系表单，我想使用css进行一些自定义样式。
我已将输入的宽度设置为100％，但不知何故，按钮输入（提交）最终小于textarea和文本输入。我无法弄清楚这里发生了什么。
如何让它们具有相同的大小（我需要使用％值，想让我的网站响应）？
下面的代码段，缺少主.css文件，因为它与问题无关。 Ionicons.css是一个自定义图标字体，我在本页的其他部分使用，我已经从CDN链接了normalize.css。
感谢您的帮助。
/************************************************
TEXT, BOX...
************************************************/
.contact-box {
background-color: #e3f9ec;
padding: 1em;
}
.contact-box p {
margin-bottom: 0.5em;
padding: 0;
}
/************************************************
INPUTS
************************************************/
input, textarea {
margin: 1em auto;
width: 100%;
}
input[name="name"], input[name="email"] {
}
textarea[name="msg"] {
height: 10em;
resize: none;
}
input[type="submit"] {
background-color: #913D88;
border: none;
color: #fff;
padding: 1em;
margin: 0 auto;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Contact | PTC Testers
</title>
<meta name="description" content="Pay to click sites testing">
<meta name="author" content="Shooshte">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/contact.css">
</head>
<body>
<header>
<h1>PTCTesters<small>.com</small></h1>
<ul>
<li><a href="http://topdeckandwreck.com/PTC_php">home</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/articles">articles</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/sites">sites</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/contact">contact</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/login">login</a></li>
</ul>
</header>
<div id="content">
<div class="contact-box">
<p>Please don't hesitate to drop us an email with any questions, suggestions, party invitations or anything else.</br><br/>Please enter a valid email in order to receive a response. We try our best to reply in the shortest time possible.<br/><br/>Have a nice day!</p>
<form action="" method="post">
<input name="name" type="text" placeholder="Your name or username"></br>
<input name="email" type="email" placeholder="Your email address"></br>
<textarea name="msg" placeholder="Your message..."></textarea></br>
<input type="submit" class="button" value="send">
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<footer>
© PTC-Testers, 2015
</footer>
</body>
</html>
答案 0 :(得分：2)
大多数表单元素都有默认的填充和边框样式，它可能会因浏览器和操作系统的不同而异。申请box-sizing:border-box可以使它们真正达到100％的大小。
input, textarea {
width: 100%;
box-sizing: border-box;
}
/************************************************
TEXT, BOX...
************************************************/
.contact-box {
background-color: #e3f9ec;
padding: 1em;
}
.contact-box p {
margin-bottom: 0.5em;
padding: 0;
}
/************************************************
INPUTS
************************************************/
input, textarea {
margin: 1em auto;
width: 100%;
box-sizing: border-box;
}
input[name="name"], input[name="email"] {
}
textarea[name="msg"] {
height: 10em;
resize: none;
}
input[type="submit"] {
background-color: #913D88;
border: none;
color: #fff;
padding: 1em;
margin: 0 auto;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Contact | PTC Testers
</title>
<meta name="description" content="Pay to click sites testing">
<meta name="author" content="Shooshte">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/contact.css">
</head>
<body>
<header>
<h1>PTCTesters<small>.com</small></h1>
<ul>
<li><a href="http://topdeckandwreck.com/PTC_php">home</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/articles">articles</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/sites">sites</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/contact">contact</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/login">login</a></li>
</ul>
</header>
<div id="content">
<div class="contact-box">
<p>Please don't hesitate to drop us an email with any questions, suggestions, party invitations or anything else.</br><br/>Please enter a valid email in order to receive a response. We try our best to reply in the shortest time possible.<br/><br/>Have a nice day!</p>
<form action="" method="post">
<input name="name" type="text" placeholder="Your name or username"></br>
<input name="email" type="email" placeholder="Your email address"></br>
<textarea name="msg" placeholder="Your message..."></textarea></br>
<input type="submit" class="button" value="send">
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<footer>
© PTC-Testers, 2015
</footer>
</body>
</html>
答案 1 :(得分：1)
设置
input, textarea{
box-sizing: border-box;
}
将填充物保留在元素内。输入'和textarea的填充正在推动宽度超过100％。或者，设置
input, textarea{
width: Calc(100% - 4px); // 4px = cumulated lateral padding
}
input.button{
width: 100%;
}
答案 2 :(得分：1)
/************************************************
TEXT, BOX...
************************************************/
.contact-box {
background-color: #e3f9ec;
padding: 1em;
}
.contact-box p {
margin-bottom: 0.5em;
padding: 0;
}
/************************************************
INPUTS
************************************************/
input, textarea {
margin: 1em auto;
width: 100%;
border-left-width: 2px;
border-right-width: 2px;
padding-left: 0px;
padding-right: 0px;
}
input[name="name"], input[name="email"] {
}
textarea[name="msg"] {
height: 10em;
resize: none;
}
input[type="submit"] {
background-color: #913D88;
border: none;
color: #fff;
padding: 1em;
margin: 0 auto;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Contact | PTC Testers
</title>
<meta name="description" content="Pay to click sites testing">
<meta name="author" content="Shooshte">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/contact.css">
</head>
<body>
<header>
<h1>PTCTesters<small>.com</small></h1>
<ul>
<li><a href="http://topdeckandwreck.com/PTC_php">home</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/articles">articles</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/sites">sites</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/contact">contact</a></li>
<li><a href="http://topdeckandwreck.com/PTC_php/login">login</a></li>
</ul>
</header>
<div id="content">
<div class="contact-box">
<p>Please don't hesitate to drop us an email with any questions, suggestions, party invitations or anything else.</br><br/>Please enter a valid email in order to receive a response. We try our best to reply in the shortest time possible.<br/><br/>Have a nice day!</p>
<form action="" method="post">
<input name="name" type="text" placeholder="Your name or username"></br>
<input name="email" type="email" placeholder="Your email address"></br>
<textarea name="msg" placeholder="Your message..."></textarea></br>
<input type="submit" class="button" value="send">
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<footer>
© PTC-Testers, 2015
</footer>
</body>
</html>