如何将多个表单集群和 headers 放在同一条线上并通过响应式设计居中？

Question

我对 css 和 html 很陌生，似乎无法找到一种常识性的方法将这些元素组合在一起，所以我可以将两个表格和 headers 在同一行。我正在尝试实施响应式设计，重点是移动优先。理想情况下，我希望将这两个表单集群集中在同一行上，并在它们之间添加一个漂亮的大连字符。

我已经尝试 div-ing 开始和结束时间并将它们左右浮动，但间距不稳。末端顶部和底部 header 排成一行，而表格奇怪地向外移动到右侧。

h2 {
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
    text-align: left;
    color: gray;
    font-size: 16px;
    font-weight: normal;
    width: 131px;

}

.min, .sec, .hour {
    width: 33px;
    box-sizing: border-box;
    border: 0 solid #ccc;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background: white;
    display: inline-block;

}

h3{
    border-top: 2px solid #ccc;
    width: 131px;
}


*:focus {
    outline: 0;
    box-shadow: none;
}

#start {
float: left;
}


#end {
float: right;
margin: 0;
}

<div id="start" align="middle">

                        <h2 class="start-time">start</h2>
                <div class="time">
                        <form class="hour">
                            <input type="text" size="3" maxlength="3" placeholder="hr">
                        </form>
                        :
                        <form class="min">
                            <input type="text" size="3" maxlength="2" placeholder="min">
                        </form>
                        :
                        <form class="sec">
                            <input type="text" size="3" maxlength="2" placeholder="sec">
                        </form>
                </div>
                        <h3></h3>
            </div>
            
            <div id="stop" align="middle">
                        <h2 class="end-time">end</h2>
                <div class="time">
                        <form class="hour">
                            <input type="text" size="3" maxlength="3" placeholder="hr">
                        </form>
                        :
                        <form class="min">
                            <input type="text" size="3" maxlength="2" placeholder="min">
                        </form>
                        :
                        <form class="sec">
                            <input type="text" size="3" maxlength="2" placeholder="sec">
                        </form>
                </div>
                        <h3></h3>
            </div>

Answer 1

请检查 Alex，我认为这可能有所帮助。您只需要在单个 div 中添加两个 div 并应用 display:flex; 希望这会有所帮助。

h2 {
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
    text-align: left;
    color: gray;
    font-size: 16px;
    font-weight: normal;
    width: 131px;

}

.min, .sec, .hour {
    width: 33px;
    box-sizing: border-box;
    border: 0 solid #ccc;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background: white;
    display: inline-block;

}

h3{
    border-top: 2px solid #ccc;
    width: 131px;
}


*:focus {
    outline: 0;
    box-shadow: none;
}

#start,
#stop{
float: left;
width: 50%;
}
.wrap {
  display: flex;
  width: 100%;
}

<div class="wrap">
  <div id="start" align="middle">

                          <h2 class="start-time">start</h2>
                  <div class="time">
                          <form class="hour">
                              <input type="text" size="3" maxlength="3" placeholder="hr">
                          </form>
                          :
                          <form class="min">
                              <input type="text" size="3" maxlength="2" placeholder="min">
                          </form>
                          :
                          <form class="sec">
                              <input type="text" size="3" maxlength="2" placeholder="sec">
                          </form>
                  </div>
                          <h3></h3>
              </div>

  <div id="stop" align="middle">
                          <h2 class="end-time">end</h2>
                  <div class="time">
                          <form class="hour">
                              <input type="text" size="3" maxlength="3" placeholder="hr">
                          </form>
                          :
                          <form class="min">
                              <input type="text" size="3" maxlength="2" placeholder="min">
                          </form>
                          :
                          <form class="sec">
                              <input type="text" size="3" maxlength="2" placeholder="sec">
                          </form>
                  </div>
                          <h3></h3>
              </div>
</div>

Answer 2

更新：我刚刚注意到您将每个输入元素包装在 form 中。不确定这是否是故意的，但事实并非如此。您可以将所有输入元素（包括开始和结束）包装在一个 form 标记中。那将是一个写得很好的 HTML.

弯曲它。这是一个fiddle：http://jsfiddle.net/ydcgpem2/

    <div class="time-container">
  <div id="start" align="middle">
    <h2 class="start-time">start</h2>
      <div class="time">
         <form class="hour">
           <input type="text" size="3" maxlength="3" placeholder="hr">
         </form>
         :
         <form class="min">
            <input type="text" size="3" maxlength="2" placeholder="min">
         </form>
         :
         <form class="sec">
            <input type="text" size="3" maxlength="2" placeholder="sec">
         </form>
      </div>
      <h3></h3>
    </div>
    <div class="hyphen">&#45;</div>
    <div id="stop" align="middle">
       <h2 class="end-time">end</h2>
       <div class="time">
         <form class="hour">
            <input type="text" size="3" maxlength="3" placeholder="hr">
         </form>
         :
         <form class="min">
            <input type="text" size="3" maxlength="2" placeholder="min">
         </form>
         :
         <form class="sec">
             <input type="text" size="3" maxlength="2" placeholder="sec">
         </form>
       </div>
       <h3></h3>
    </div>
</div>

CSS:

.time-container{
  display: flex;
  align-content: middle;
}

.hyphen{
  align-self: center;
  margin: 0 20px;
}

h2 {
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
    text-align: left;
    color: gray;
    font-size: 16px;
    font-weight: normal;
    width: 131px;

}

.min, .sec, .hour {
    width: 33px;
    box-sizing: border-box;
    border: 0 solid #ccc;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background: white;
    display: inline-block;

}

h3{
    border-top: 2px solid #ccc;
    width: 131px;
}


*:focus {
    outline: 0;
    box-shadow: none;
}

如何将多个表单集群和 headers 放在同一条线上并通过响应式设计居中？

How to group multiple clusters of forms and headers to put on same line and center with responsive design?

html

css

forms

css-position