如何使用CSS对齐标签和输入

时间:2016-12-25 09:27:07

标签: html css

有以下HTML标记:

    input[type="password"] {
      margin-left: 10px;
      background: #F2F2F2;
      height: 35px;
      font-style: normal;
      font-size: 14px;
      border: 0;
    }
    
    input[type="submit"] {
      display: inline-block;
      text-decoration: none !important;
      color: #fff;
      background: #000;
      font-size: 10px;
      line-height: 1.7;
      padding: 9px 29px;
      position: relative;
      text-align: center;
      cursor: pointer;
      text-transform: uppercase;
      -webkit-transition: all 200ms ease-out;
      -moz-transition: all 200ms ease-out;
      -o-transition: all 200ms ease-out;
      transition: all 200ms ease-out;
      border: none;
      font-weight: normal;
      letter-spacing: 2px;
    }
<p>
      <label for="pwbox-59">Password: <input name="post_password" id="pwbox-59"   type="password" size="20"></label> 
      <input type="submit" name="Submit" value="Enter">
    </p>

如何垂直对齐一行中的输入?提前谢谢!

3 个答案:

答案 0 :(得分:1)

添加:

p {
  display:flex;
}

小提琴:https://jsfiddle.net/py4x7zhk/

答案 1 :(得分:0)

尝试执行以下操作:

  <div style="display:table;">
      <div style="display:table-cell;vertical-align:middle;">
          <label for="pwbox-59">Password: </label>
          <input name="post_password" id="pwbox-59"   type="password" size="20">
      </div>
  </div>
  <input type="submit" name="Submit" value="Enter">

答案 2 :(得分:0)

您的问题具有误导性,将项目排列在&#34;行&#34;根据定义意味着水平。但是你说垂直。所以我假设你的意思是在一列不是一行。

我假设你的意思是反对在行上垂直对齐项目,因为你的代码已经在那里做了(https://jsfiddle.net/BradChelly/1dqLjz0o/

如果想要换行符,可以使用<br>标记,使用边距对齐

&#13;
&#13;
label {
  margin-left: 10px;
}
input[type="password"] {
  margin-left: 10px;
  background: #ccc;
  height: 35px;
  font-style: normal;
  font-size: 14px;
  border: 0;
}

input[type="submit"] {
  margin-left: 10px;
  display: inline-block;
  text-decoration: none !important;
  color: #fff;
  background: #000;
  font-size: 10px;
  line-height: 1.7;
  padding: 9px 29px;
  position: relative;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  border: none;
  font-weight: normal;
  letter-spacing: 2px;
}
&#13;
<p>
  <label for="pwbox-59">Password: <br>
    <input name="post_password" id="pwbox-59" type="password" size="20">
  </label> <br>
  <input type="submit" name="Submit" value="Enter">
</p>
&#13;
&#13;
&#13;