Question

尝试使表单响应，当我在1000px以下调整大小时，它会获得-34的右边距。我不知道它为什么这样做。另外，当我调整大小时，我的提交按钮略微偏离中心，由于某种原因它只是不会居中...... 我在我的CSS中使用LESS。

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;
        }
    }
}

Answer 1

您需要查看大小调整大小，这会告诉浏览器在缩小尺寸时包含宽度100％的填充：

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

随机边距权利

1 个答案: