时间戳

首页 > 解决方案 > 如何将这些文本框对齐为笔直并相互对齐？

javascript - 如何将这些文本框对齐为笔直并相互对齐？

问题描述

我意识到这是一个愚蠢的问题。我对我的 HTML/CSS 有点生疏了。我希望每一侧的文本框彼此对齐，而不是像现在这样稍微交错。我知道我在 html 和 CSS 中做错了很多事情，我只是不确定我需要添加/更改什么。我也知道除了最后一个之外的所有框都设置为 class=leftBoxes ，而并非所有框都在左侧，这令人困惑。

这是jsfiddle。请注意，当您在 jsfiddle 中运行我的代码时，小预览并不是全屏时的样子。这是全屏的样子

这是我的代码：

HTML：

<body>

 
 <form>
        <label for="son">Sales Order Number:</label>
        <input type="text" class="leftBoxes" id="son" name="son">

        <label for="shipname">Ship to Name:</label>
        <input type="text" class="leftBoxes" id="shipname" name="shipname">

        <br>

        <label for="arnum">AR Division Number:</label>
        <input type="text" class="leftBoxes" id="arnum" name="arnum">

        <label for="shipadd1">Ship to Address 1:</label>
        <input type="text" class="leftBoxes" id="shipadd1" name="shipadd2">

        <br>

        <label for="cnum">Customer Number:</label>
        <input type="text" class="leftBoxes" id="cnum" name="cnum">

        <label for="shipadd2">Ship to Address 2:</label>
        <input type="text" class="leftBoxes" id="shipadd2" name="shipadd2">

        <br>

        <label for="custponum">Customer PO Number:</label>
        <input type="text" class="leftBoxes" id="custponum" name="custponum">

        <label for="custponum">Ship to City:</label>
        <input type="text" class="leftBoxes" id="custponum" name="custponum">

        <br>

        <label for="orderdate">Order Date:</label>
        <input type="text" class="leftBoxes" id="orderdate" name="orderdate">

        <label for="shipstate">Ship to State:</label>
        <input type="text" class="leftBoxes" id="shipstate" name="shipstate">

        <br>

        <label  for="shipzip">Ship to Zip Code:</label>
        <input type="text" class="rightBoxes" id="shipzip" name="shipzip">


      </form>
      
  </body>

CSS：

body {
  background-color: lightblue;
  text-align: center;
}

.leftBoxes {
  display: inline-block;
  margin-right: 100px;
  
}
.rightBoxes {
  display: inline-block;
  margin-left: 100px;
}

标签： javascripthtmlcsstextboxuser-experience

解决方案

也许网格可以帮助你。看看我在这里做了什么：

form {
  display: grid;
  grid-template-columns: auto auto auto auto;
}


body {
  background-color: lightblue;
}

input {
  display: inline-block;
  margin-right: 10px;
}
 <body>

 
 <form>
        <label for="son">Sales Order Number:</label>
        <input type="text" class="leftBoxes" id="son" name="son">

        <label for="shipname">Ship to Name:</label>
        <input type="text" class="leftBoxes" id="shipname" name="shipname">



        <label for="arnum">AR Division Number:</label>
        <input type="text" class="leftBoxes" id="arnum" name="arnum">

        <label for="shipadd1">Ship to Address 1:</label>
        <input type="text" class="leftBoxes" id="shipadd1" name="shipadd2">

       

        <label for="cnum">Customer Number:</label>
        <input type="text" class="leftBoxes" id="cnum" name="cnum">

        <label for="shipadd2">Ship to Address 2:</label>
        <input type="text" class="leftBoxes" id="shipadd2" name="shipadd2">

       

        <label for="custponum">Customer PO Number:</label>
        <input type="text" class="leftBoxes" id="custponum" name="custponum">

        <label for="custponum">Ship to City:</label>
        <input type="text" class="leftBoxes" id="custponum" name="custponum">

        

        <label for="orderdate">Order Date:</label>
        <input type="text" class="leftBoxes" id="orderdate" name="orderdate">

        <label for="shipstate">Ship to State:</label>
        <input type="text" class="leftBoxes" id="shipstate" name="shipstate">

        

        <label  for="shipzip">Ship to Zip Code:</label>
        <input type="text" class="rightBoxes" id="shipzip" name="shipzip">
      </form>
      
  </body>

推荐阅读