0
試圖使表單響應，當我調整它在1000px以下時，它獲得了-34的右邊距。我不知道爲什麼它會這樣做。此外，當我調整我的提交按鈕稍微偏離中心，由於某種原因，它只是不會中心... 我在我的css中使用LESS。Random margin-right
HTML：
<!DOCTYPE html>
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if gt IE 9]><!--><html><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="/css/main.css" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
</head>
<body class="pw">
<header>
<img src="http://onpointfootwear.com/2014/img/img_placeholder.jpg" alt="logo"/>
</header>
<section class="pw">
<!-- @import "/Partials/header.html" -->
<div class="contact-info">
<p> Some Contact Information </p>
</div>
<p> Contact Form: </p>
<div id="contact-area">
<form>
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name" />
<label for="Email">Email:</label>
<input type="text" name="Email" id="Email" />
<label for="Message">Message:</label><br />
<textarea name="Message" rows="20" cols="20" id="Message"></textarea>
<input type="submit" name="submit" value="Submit" class="submit-button" />
</form>
<div style="clear: both;"></div>
</div>
</section>
<ul class="share-buttons">
<li><a href="#" title="Share on Facebook" target="_blank"><img src="http://i.imgur.com/7kQQwLU.png"></a></li>
<li><a href="#" target="_blank" title="Tweet"><img src="http://i.imgur.com/zEUBZSI.png"></a></li>
<li><a href="#" target="_blank" title="Share on Google+"><img src="http://i.imgur.com/hNgPsyc.png"></a></li>
<li><a href="#" target="_blank" title="Post to Tumblr"><img src="http://i.imgur.com/vnwhljt.png"></a></li>
<li><a href="#" target="_blank" title="Pin it"><img src="http://i.imgur.com/8g0gxyZ.png"></a></li>
<li><a href="#" target="_blank" title="Add to Pocket"><img src="http://i.imgur.com/rTqXncE.png"></a></li>
<li><a href="#" target="_blank" title="Submit to Reddit"><img src="http://i.imgur.com/ehb3wbL.png"></a></li>
<li><a href="#" target="_blank" title="Share on LinkedIn"><img src="http://i.imgur.com/tujqxUY.png"></a></li>
<li><a href="#" target="_blank" title="Publish on WordPress"><img src="http://i.imgur.com/EXy9FOK.png"></a></li>
<li><a href="#" target="_blank" title="Save to Pinboard"><img src="http://i.imgur.com/4qhISPT.png"></a></li>
<li><a href="#" target="_blank" title="Email"><img src="http://i.imgur.com/ZEAJvU5.png"></a></li>
</ul>
<footer>
</footer>
<!-- @import "/Partials/footer.html" -->
<!-- @import "/Partials/additional-code.html" -->
</body>
</html>
的CSS：
@import "elements.less";
@import "normalize.less";
@import "var.less";
#main {
p {
a {
}
}
}
body {
.font();
}
header img {
margin: 0 auto;
display: block;
margin-top: 3%;
border: 4px @blue solid;
}
section p {
.font(20px);
text-align: center;
}
section > p {
margin-bottom: 5px;
}
.contact-info {
border: 2px black solid;
margin: 20px auto 20px auto;
width: 80%;
}
#contact-area {
width: 600px;
margin-top: 25px;
margin: 0 auto;
border: 2px black solid;
padding: 15px;
input, textarea {
padding: 5px;
width: 471px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
textarea {
height: 200px;
}
textarea:focus, input:focus {
border: 2px solid #900;
}
input.submit-button {
width: 100px;
float: right;
background-color: #0066FF;
text-transform: uppercase;
}
}
label {
float: left;
text-align: left;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}
#main {
p {
}
}
.post-it{
margin-top: 50px;
}
.note {
color: #333;
position: relative;
width: 300px;
margin: 0 auto;
padding: 20px;
font-family: Satisfy;
font-size: 30px;
box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
background: #eae672;
}
ul.share-buttons{
list-style: none;
padding: 0;
text-align: center;
}
ul.share-buttons li{
display: inline;
}
p {
color: black;
.tr(all 0.3s linear);
&.class1 {
}
&:hover {
color: lime;
.tr(all 0.3s linear);
}
}
@media screen and (max-width: 1000px) {
body {
}
#contact-area {
width: 100%;
input, textarea {
width: 90%;
}
input.submit-button {
width: 94%;
margin: 0 auto;
float: left;
background-color: #0066FF;
text-transform: uppercase;
}
}
}
您可以使用您編譯的CSS和HTML創建一個JS小提琴 –
[點擊這裏]（http://jsfiddle.net/shashimj/z85687ne/）f或jsfiddle – shas
http://jsfiddle.net/z85687ne/1/在語言上使用SCSS – mjsblues