时间戳

首页 > 解决方案 > 如何确保 HTML 中文本框的一致对齐？

javascript - 如何确保 HTML 中文本框的一致对齐？

问题描述

我正在尝试将我的字段和文本框设置为在 HTML 中一致地对齐，但我还不熟悉这样做，因为我是 HTML 和 CSS 的新手。这是我想要实现的目标：在此处输入图像描述

到目前为止，这是我的代码：

<!DOCTYPE html>

<html>
    <head>
        <style>
        
            p {
            font-size:16px
            }
            
            input {
            font-size:inherit;
            }
            
        </style>
        
        <script>
        
        </script>
    </head>
    
    <body>
    <br>
    <br>
        <p>Name:<input type="text"  id="nameTextBox"/></p>
        <p>Age:<input type="number"  id="ageBox" min="0"/></p>
        <p>Gender<input type="radio" name="genderRadioButton" value="male"/>Male
                    <input type="radio" name ="genderRadioButton" value="female"/>Female</p>
                
    </body>
    
</html>

任何帮助是极大的赞赏 ：）

标签： javascripthtml

解决方案

有很多方法可以实现相同的目标，例如使用<table>, float, flex。下面是弹性的。如果你需要，我会添加其他的。

.container{
  width:300px;
}

.row{
  display:flex;
  margin-bottom: 10px
}

.row>*{
  flex:1
}
<div class="container">
  <div class="row">
    <label>Name:</label>
    <input name="name" />
  </div>
  <div class="row">
    <label>Id:</label>
    <input name="id" />
  </div>
</div>

推荐阅读