Question

我正试图将我的表格集中在一起，但它在右边有一个神奇的边缘。我试图让我的表单响应，但当我调整窗口大小时，我的提交按钮只是不想中心，任何提示？ http://jsfiddle.net/z85687ne/1/ - 在语言上使用SCSS

Answer 1

您通常缺少box-sizing属性设置为border-box，因此您的元素可以包含margins和paddings到其大小的整体计算中。<登记/> 然后您可以将它们设置为width:100%，如下所示：

<强> 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) {
    html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
    #contact-area {
        width: 100%;
                input, textarea {
                    width: 100%;
                }
        input.submit-button {
            width: 100%;
            margin: 0 auto;
            float: left;
            background-color: #0066FF;
            text-transform: uppercase;
        }
    }
}

那个

JSFiddle

Answer 2

在我看来，您需要对元素进行一些额外的控制。可以使用表单中的div来完成。

<form>
  <div class="form-element">
    <label for="Name">Name:</label>
    <input type="text" name="Name" id="Name" />
  </div>
</form>

然后您可以使用

控制表单

#contact-area {
  width: 100%;
  max-width: 600px;

  .form-element {
    width: 470px;
    margin: 0 auto;

    > label {
      width: 125px;
      display: inline-block;
    }

    > input,
    > textarea {
      display: inline-block;
    }
  }
}

如果你想让它居中，请不要将你的提交按钮浮动。

我表格右侧的保证金神奇地改变了吗？

2 个答案: