如何将带有标签的表单中的输入置于同一行

Question

我有一个带有表单，一些标签和输入的页面。

设计要求“输入”在页面中居中。标签与输入内联并且右对齐。

注意：标签不包含在居中，它们向右浮动。见下面的例子。

以下是我对布局的看法。

.input-wrap {
  margin-bottom: 22px;
}

.label {
  display: inline-block;
  width: 102px;
  text-align: right;
  font-size: 20px;
  margin-right: 15px;
}

.input {
  width: 172px;
  height: 30px;
  font-size: 20px;
  border: 1px solid $black;
}

form {
  position: relative;
  margin: 0 auto;
  margin-top: 44px;
}

h1 {
  text-align: center;
 }
  

<h1>Inputs should be centered</h1>

<form action="/" method="post">

  <div class="input-wrap">
    <label for="name" class="label">your name</label>
    <input type="text" id="name" name="name" class="input">
  </div>

  <div class="input-wrap">
    <label for="email" class="label">email</label>
    <input type="email" id="email" name="email" class="input">
  </div>

</form

Answer 1

您可以使用 Flexbox / 定位 组合来实现这一目标：

.input-wrap {
  position: relative; /* needs to be set on the parent element */
  margin-bottom: 22px;
}

.label {
  position: absolute; /* positioned relative to the parent element; taken out of the normal document flow */
  left: -117px; /* moved left by negative 102px (width) + 15px (margin-right) because the default value is 0 */
  display: inline-block;
  width: 102px;
  text-align: right;
  font-size: 20px;
  /*margin-right: 15px; not necessary anymore, i.e. has no affect on label elements*/
}

.input {
  width: 172px;
  height: 30px;
  font-size: 20px;
  border: 1px solid $black;
}

form {
  display: flex; /* displays children (divs) inline by default thats why you need to change its direction */
  flex-direction: column; /* stacks children vertically */
  align-items: center; /* horizontal alignment / centering / affects only input elements since label elements are taken out of the normal document flow */
  position: relative;
  margin: 0 auto;
  margin-top: 44px;
}

h1 {
  text-align: center;
}

<h1>Inputs should be centered</h1>

<form action="/" method="post">

  <div class="input-wrap">
    <label for="name" class="label">your name</label>
    <input type="text" id="name" name="name" class="input">
  </div>
  
  <div class="input-wrap">
    <label for="email" class="label">email</label>
    <input type="email" id="email" name="email" class="input">
  </div>
  
</form>

Answer 2

.input-wrap {
        width: fit-content;
        height: fit-content;
        margin: 0 auto;
        margin-bottom: 22px;}

Answer 3

使用flexbox解决方案的替代方法是在表单上设置宽度，并根据label和input宽度百分比。以下内容适用于所有屏幕尺寸，而flexbox解决方案仅适用于大于400px的屏幕，任何小于此尺寸的屏幕都将开始切断标签文本。

＆＃13;

＆＃13;

.input-wrap {
  margin-bottom: 22px;
}

.label {
  display: inline-block;
  width: 100%;
  font-size: 20px;
  margin-right: 16px;
  margin-bottom: 8px;
}

.input {
  width: 100%;
  height: 30px;
  font-size: 20px;
  border: 1px solid $black;
}

form {
  position: relative;
  margin: 0 auto;
  margin-top: 44px;
}

h1 {
  text-align: center;
}

form {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

@media screen and (min-width: 600px) {
  .label {
    width: 30%;
    text-align: right;
  }
  .input {
    width: 40%;
  }
}

＆＃13;

<h1>Inputs should be centered</h1>

<form action="/" method="post">
  <div class="input-wrap">
    <label for="name" class="label">your name</label>
    <input type="text" id="name" name="name" class="input">
  </div>

  <div class="input-wrap">
    <label for="email" class="label">email</label>
    <input type="email" id="email" name="email" class="input">
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 4

试试这个：

<form action="/" method="post">

 <center>
   <div class="input-wrap">
     <label for="name" class="label">your name</label>
     <input type="text" id="name" name="name" class="input">
   </div>

   <div class="input-wrap">
     <label for="email" class="label">email</label>
     <input type="email" id="email" name="email" class="input">
   </div>
 </center>

</form>

或者您可以使用此css代码居中div：

.input-wrap {
  display: inline-block;
  text-align: center;
  position: relative;
  margin: 0 auto;
}