Как сгруппировать несколько кластеров форм и заголовков, чтобы поместить их в одну линию и центр с адаптивным дизайном? - PullRequest
Новая
       14

Как сгруппировать несколько кластеров форм и заголовков, чтобы поместить их в одну линию и центр с адаптивным дизайном?

0 голосов
/ 22 декабря 2018

Я очень плохо знаком с 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>

Ответы [ 2 ]

0 голосов
/ 22 декабря 2018

Обновление: я только что заметил, что вы завернули каждый из своих элементов ввода в form.Не уверен, что это намеренно, но так не должно быть.Вы можете обернуть все свои элементы ввода - включая начало и конец - в один тег form.Это был бы хорошо написанный HTML.

Согните его.Вот скрипка: 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;
}
0 голосов
/ 22 декабря 2018

Пожалуйста, проверьте Алекса, я думаю, что это может помочь.Вам просто нужно добавить оба 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>
...