Question

我正在制作一个简单的预订表格，它很完整，但是由于某种原因，每个输入都偏离了中心对齐的位置。

我将表格包装好了，因为有多个部分，输入的DIV使控制它们变得更加容易。

页面已完成，因此需要遵循此布局，唯一的问题是对齐，如下图和代码所示。

.booking-wrap {
    width: 100%;
    padding-top: 3.5vh;
}

@media only screen and (max-width: 500px) {
.booking-wrap {
    width: 100%;
    padding-top: 3.5vh;
}
}

@media only screen and (max-width: 500px) {
.booking-wrap {
    width: 100%;
    padding-top: 1.75vh;
}
}

.booking-form {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3.5vh;
}


.user-input {
    max-width: 60%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5vh;
}

.responsecontainer {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.user-response {
    width: 94%;
    margin-left: auto;
    margin-right: auto;
}

::placeholder {
  color: #FFFFFF;
}

input[type=name], select {
  width: 100%;
  padding: 2vh;
  margin: 0.5vh;
  display: inline-block;
  border-radius: 2vh;
  border: 0;
  color: #FFFFFF;
  background: #000000;
  outline: none;
}

<div class="booking-wrap">
 <div class="booking-form">
  <p class="form-explainer left textoffblack">Please enter your details</p>

   <div class="user-input">

    <div class="responsecontainer">
     <div class="user-response">
      <input type="name" placeholder="First Name" id="forename" name="forename" required>
     </div>
    </div>

   </div>
  </div>
</div>

任何帮助将不胜感激，我认为这是一个快速解决方案，但还不太清楚。

Answer 1

您的输入元素具有width: 100%;和margin: 0.5vh;。不管margin的设置如何，box-sizing总是被添加到宽度，因此总宽度为100％（容器宽度的总和）加上2倍0.5vh。这就是为什么它超出了容器的宽度。

一种解决方案可能是将0.5vh作为padding应用于容器，并从margin元素中删除input设置。

Answer 2

您将宽度设置为其容器的100％，但同时也将宽度的边距设置为1vh，可以使用calc()来避免该问题：width: calc(100% - 1vh)

使用边框作为输入将使边框成为边框本身的一部分。

.booking-wrap {
    width: 100%;
    padding-top: 3.5vh;
}

@media only screen and (max-width: 500px) {
.booking-wrap {
    width: 100%;
    padding-top: 3.5vh;
}
}

@media only screen and (max-width: 500px) {
.booking-wrap {
    width: 100%;
    padding-top: 1.75vh;
}
}

.booking-form {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3.5vh;
}


.user-input {
    max-width: 60%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5vh;
}

.responsecontainer {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.user-response {
    width: 94%;
    margin-left: auto;
    margin-right: auto;
}

::placeholder {
  color: #FFFFFF;
}

input[type=name], select {
  width: calc(100% - 1vh);
  box-sizing: border-box;

  padding: 2vh;
  margin: 0.5vh;
  display: inline-block;
  border-radius: 2vh;
  border: 0;
  color: #FFFFFF;
  background: #000000;
  outline: none;
}

<div class="booking-wrap">
<div class="booking-form">
<p class="form-explainer left textoffblack">Please enter your details</p>

<div class="user-input">

<div class="responsecontainer">
<div class="user-response">
<input type="name" placeholder="First Name" id="forename" name="forename" required>
</div>
</div>

</div>
</div>
</div>

Answer 3

也许有比这更好的解决方案，但是消除输入两侧的边距似乎可行。

input[type=name], select {
  width: 100%;
  padding: 2vh;
  margin-top: 0.5vh;
  margin-bottom: 0.5vh;
  display: inline-block;
  border-radius: 2vh;
  border: 0;
  color: #FFFFFF;
  background: #000000;
  outline: none;
}

Answer 4

.booking-wrap {
    width: 100%;
    padding-top: 3.5vh;
}

@media only screen and (max-width: 500px) {
.booking-wrap {
    width: 100%;
    padding-top: 3.5vh;
}
}

@media only screen and (max-width: 500px) {
.booking-wrap {
    width: 100%;
    padding-top: 1.75vh;
}
}

.booking-form {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3.5vh;
}


.user-input {
    max-width: 60%;
    //text-align: center;
    //margin-left: auto;
    //margin-right: auto;
    margin-top: 2.5vh;
}

.responsecontainer {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.user-response {
    width: 94%;
    //margin-left: auto;
    //margin-right: auto;
}

::placeholder {
  color: #FFFFFF;
}

input[type=name], select {
  width: 100%;
  padding: 2vh;
  margin: 0.5vh;
  display: inline-block;
  border-radius: 2vh;
  border: 0;
  color: #FFFFFF;
  background: #000000;
  outline: none;
}

<div class="booking-wrap">
<div class="booking-form">
<p class="form-explainer left textoffblack">Please enter your details</p>

<div class="user-input">

<div class="responsecontainer">
<div class="user-response">
<input type="name" placeholder="First Name" id="forename" name="forename" required>
</div>
</div>

</div>
</div>
</div>

我注释掉了margin-left：自动，margin-right：自动用于.responsecontainer和.user-response

但是，我不确定这就是您想要的。如果不是，请让我知道更多细节，以便为您提供帮助。

样式输入无法对齐

4 个答案: