html - 如何通过响应式设计将多个表单和标题集群分组以放在同一行和中心？

Question

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

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

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>