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

Question

I realize this is a dumb question.我意识到这是一个愚蠢的问题。 I'm a bit rusty with my HTML/CSS.我对我的 HTML/CSS 有点生疏了。 I want the text boxes on each side to be lined up with each other and not slightly staggered like they currently are.我希望每一侧的文本框彼此对齐，而不是像现在这样稍微交错。 I know that I am doing multiple things wrong, both in html and CSS, I just am not sure what I need to add/change.我知道我在 html 和 CSS 中做错了很多事情，我只是不确定我需要添加/更改什么。 I also know that all the boxes except the last one are set to class=leftBoxes when not all of them are on the left, which is confusing.我也知道除了最后一个之外的所有框都设置为 class=leftBoxes ，而并非所有框都在左侧，这令人困惑。

Here is the jsfiddle .这是jsfiddle 。 PLEASE NOTE the small preview when you run my code in jsfiddle is not what it looks like when it's full screen.请注意，当您在 jsfiddle 中运行我的代码时，小预览并不是全屏时的样子。 This is what it looks like full screen这是全屏的样子

Here is my code:这是我的代码：

HTML: 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: CSS：

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

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

Answer 1

Perhaps a grid can help you out.也许网格可以帮助你。 See what I did here:看看我在这里做了什么：

 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>

Answer 2

You would have to use flexbox or grid .您将不得不使用flexbox或grid 。 Try adding:尝试添加：

form{
  display:flex;
  flex-direction: column;
}

Answer 3

NOT a Solution But adding不是解决方案，而是添加

[type='text']{  
margin-top:10px; 
}

Will make it a little neat.会让它有点整洁。

There's one explanation why the last one is behaving oddly.有一种解释为什么最后一个行为奇怪。 The text for the text field is taking the text-align center styling, so its displayed right at the center.文本字段的文本采用文本对齐中心样式，因此它显示在中心。

It would be interesting if there's any solution to getting the last one to behave!!!如果有任何解决方案可以让最后一个表现得很好，那将会很有趣！

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

问题描述

3 个解决方案

解决方案1
1 2020-12-08 19:10:32

解决方案2
0 2020-12-08 19:16:32

解决方案3
0 2020-12-08 19:38:27

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

问题描述

3 个解决方案

解决方案1 1 2020-12-08 19:10:32

解决方案2 0 2020-12-08 19:16:32

解决方案3 0 2020-12-08 19:38:27

解决方案1
1 2020-12-08 19:10:32

解决方案2
0 2020-12-08 19:16:32

解决方案3
0 2020-12-08 19:38:27