Random margin-right

试图使表单响应，当我调整它在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; 
     } 
    } 
}

来源

2015-10-20 mjsblues

您可以使用您编译的CSS和HTML创建一个JS小提琴 –

[点击这里]（http://jsfiddle.net/shashimj/z85687ne/）f或jsfiddle – shas

http://jsfiddle.net/z85687ne/1/在语言上使用SCSS – mjsblues

你需要看看盒大小，这将告诉浏览器包括宽度100％的空白时，你由大到小：

@media screen and (max-width: 1000px) 
#contact-area { 
    width: 100%; 
    box-sizing: border-box; 
}

来源

2015-10-20 12:24:19 Benneb10

修正了这个问题！谢谢。我现在要看这个代码大小的教程。 – mjsblues

Random margin-right

回答

相关问题