代码之家 › 专栏 › 技术社区 › Levent Ozbek

如何在CSS和HTML中对齐垂直文本框?

css3 css html javascript

Levent Ozbek · 技术社区 · 6 年前

我是一个前端初学者(从昨天开始),我正在通过免费编解码器学习。我正试图建立一个调查网站。我想将底部的文本框左侧与顶部的左侧对齐。我试着改变 text-align 但这并没有给我带来公正。如果这个问题已经被问到了,我很抱歉。我无法把以前的答案和我的联系起来。

这是我的代码:

body {background-color: #98AFC7;}

#title{
  text-align: center;
  font-family: Arial, Times, serif;
  font-style: oblique;
  color: white;
}

#screen-belly{
  background-color: rgb(250, 250, 250);
  margin: 0 auto;
  border-radius: 4px;
  width: 75%%;
  max-width: 1000px;
  padding: 10px;
  padding-top: 20px;
}

p{
  text-align: center;
  font-family: monospace, serif;
  font-size: 15px;
}

.rightTab {
  display: inline-block;
  text-align: left;
  width: 48%;
  vertical-align: middle;
}

.leftTab {
  display: inline-block;
  text-align: right;
  width: 48%;
  vertical-align: middle;
}

.eMailTab{
  display: inline;
  text-align: right;
  width: 48%;
}

.name-fields {
  height: 20px;
  width: 140px;
  padding: 5px;
  margin: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

.input-field {
  height: 20px;
  width: 280px;
  padding: 5px;
  margin: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

<h1 id="title">Survey Form</h1>

<div id="screen-belly">
  <p>Please take the short Survey to hep us improve our services</p>

  <div class="rowTab">
      <div class="leftTab">
        <input autofocus type="text" name="name" id="name" class="name-fields" placeholder="First name" required>
      </div>
      <div class="rightTab">
        <input autofocus type="text" name="name" id="name" class="name-fields" placeholder="Last Name" required>
      </div>
    </div>

      <div class="eMailTab">
        <input autofocus type="text" name="email" id="email" class="input-field" placeholder="e-Mail address" required>
      </div>
    </div>
</div>

这是我的代码笔链接,你可以看到我在说什么:

https://codepen.io/omaroz92/full/VBWbae/

2 回复 | 直到 6 年前

Joseph Webber 6 年前

你可以用 flexbox 很容易做到这一点。我改变了你的HTML和CSS使之工作。

body {
  background-color: #98AFC7;
}

#title {
  text-align: center;
  font-family: Arial, Times, serif;
  font-style: oblique;
  color: white;
}

#screen-belly {
  background-color: rgb(250, 250, 250);
  margin: 0 auto;
  border-radius: 4px;
  width: 75%;
  max-width: 1000px;
  padding: 10px;
  padding-top: 20px;
}

p {
  text-align: center;
  font-family: monospace, serif;
  font-size: 15px;
}

.container {
  width: 75%;
  max-width: 600px;
  margin: 0 auto;
}

.row {
  display: flex;
}

input {
  flex: 1;
  height: 20px;
  min-width: 0;
  padding: 5px;
  margin: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

<h1 id="title">Survey Form</h1>

<div id="screen-belly">
  <p>Please take the short Survey to hep us improve our services</p>

  <div class="container">
    <div class="row">
      <input autofocus type="text" name="name" id="name" placeholder="First name" required>
      <input type="text" name="name" id="name" placeholder="Last Name" required>
    </div>
    <div class="row">
      <input type="text" name="email" id="email" placeholder="e-Mail address" required>
    </div>
  </div>
</div>

scrappedcola 6 年前

让你的div display:inline 可以有效地移除“宽度”属性。所以文本元素实际上是右对齐的,但是没有48%的宽度,文本框就会保持在原来的位置。 https://codepen.io/anon/pen/pZOPPV . 然而,这可能不是做这些事情的最佳方式。尝试内联块:

.eMailTab{
  display: inline-block;
  text-align: right;
  width: 62%;
}

要使电子邮件和名字框的左侧对齐,请调整电子邮件框的宽度。

如果要查看width属性上的实际等级库,则此问题的答案是适当的: https://stackoverflow.com/a/22487952/462006