Question

这是一个非常初学的问题，但我一直试图想出一种方法，让名称，电子邮件和年龄对齐在输入字段的左侧。然后让它以输入框为中心。

Here是指向我的codepen.io

的链接

我尝试将文本浮动到左侧并使输入显示为块。输入似乎卡在一个非常宽的宽度，使文本无法正常显示。如果我设法缩小盒子的宽度，并想要调整填充，它会使输入框更大！而不是向左或向右移动文本和输入。

＆＃13;

#text-label {
  width: 50%;
}

#text-input {
  width: 40%;
  display: block;
  margin: auto;
}

#email-input {
  width: 80%;
  display: block;
  margin: auto;
}

#number-input {
  width: 80%;
  display: block;
  margin: auto;
}

＆＃13;

<div id="name-email-age">
  <div id="name" class="center">
    <label id="text-label">
            * Name:
          </label>
    <input id="text-input" type="text" name="Enter your name" placeholder="Enter your name" required />
    <div id="email" class="center">
      <label id="email-label">
            * Email:
          </label>
      <input id="email-input" type="email" name="Enter your email" placeholder="Enter your Email" required />
    </div>
    <div id="age" class="center">
      <label id="age-label">
            * Age:
          </label>
      <input id="number-input" type="number" name="Enter your age" placeholder="Enter your Age" required max="122" min="5" />
    </div>
  </div>

＆＃13;

Answer 1

将输入显示样式更改为inline-block。

https://codepen.io/AustinGordon/pen/yEodLo

Answer 2

也许你可以试试这个：

在.control-group中包装标签和控件以获得最佳间距并将框更改为理想尺寸=）。

#text-label {
  width: 50%;
}

#text-input {
  width: 50%;
  display: block;
}

#email-input {
  width: 100%;
  display: block;
}

#number-input {
  width: 100%;
  display: block;
}
.control-group {
  width: 80%;
  margin: auto;
  text-align: left;
}

<div id="name-email-age">
    <div id="name" class="center">
        <div class="control-group">
            <label id="text-label">* Name:</label>
            <input id="text-input" type="text" name="Enter your name" placeholder="Enter your name" required />
        </div>
    </div>
    <div id="email" class="center">
        <div class="control-group">
            <label id="email-label">* Email:</label>
            <input id="email-input" type="email" name="Enter your email" placeholder="Enter your Email" required />
        </div>
    </div>
    <div id="age" class="center">
        <div class="control-group">
            <label id="age-label">* Age:</label>
            <input id="number-input" type="number" name="Enter your age" placeholder="Enter your Age" max="122" min="5" required />
        </div>
    </div>
</div>

无法弄清楚如何将水平文本与输入左侧对齐

2 个答案: