我在我的页面上使用 html 表单输入(text、textarea、submit)来创建联系表单，我想使用 css 做一些自定义样式。
我已将输入的宽度设置为 100%，但不知何故按钮输入(提交)最终小于文本区域和文本输入。我真的不知道这里发生了什么。
如何让它们的大小都相同(我需要使用 % 值，想让我的网站响应)？
下面的片段，缺少主要的 .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>最佳答案
大多数表单元素都有默认的内边距和边框样式，它可能会因浏览器和操作系统的不同而有所不同。申请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>关于html - 宽度为 100% 的输入具有不同的大小(提交、文本、文本区域)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30620749/