1

Есть родительский элемент .inputfields, у которого есть блок #buttonsleft, из трех кнопок, выравненный по левому краю, и #buttonsright, который должен быть выравнен по правому краю.

body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

p, h1, form, button {
    border: 0;
    margin: 0;
    padding: 0;
}

.mystyle {
    border: solid 2px burlywood;
    background-color: antiquewhite;
    border-radius: 5px;
}

.inputfields {
  display: inline;
  
}


.mystyle h1 {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}



#buttonsright {
  float: right;
  width: 30%;
}

#buttonsleft {
  float: left;
  width: 30%;
}

#buttonsleft input {
  font-size: 12px;
  padding: 4px 2px;
  border: solid 1px burlywood;
  width: 100%;
  margin: 2px 0 20px;
  border-radius: 5px;
  display: block;
}

#buttonsright input {
  font-size: 12px;
  padding: 4px 2px;
  border: solid 1px burlywood;
  width: 100%;
  margin: 2px 0 20px;
  border-radius: 5px;
  display: block;
}
<div class="mystyle">
<h1>All values</h1>
<div class="inputfields">
    <div id="buttonsleft">
        <INPUT TYPE="BUTTON" VALUE="<1-1>" ONCLICK="">
        <INPUT TYPE="BUTTON" VALUE="<1-2>" ONCLICK="">
        <INPUT TYPE="BUTTON" VALUE="<1-3>" ONCLICK="">       
    </div>
    <div id="buttonsright">
        <INPUT TYPE="BUTTON" VALUE="<2-1>" ONCLICK="">
        <INPUT TYPE="BUTTON" VALUE="<2-2>" ONCLICK="">
        <INPUT TYPE="BUTTON" VALUE="<2-3>" ONCLICK="">
    </div>
</div>

Проблема в позиционировании #buttonsright. Они либо выстраиваются по вертикали с левого края, либо же с правого, но ниже чем кнопки из блока #buttonsleft. Собственно вопрос - как сделать чтобы блоки кнопок располагались ровно напротив друг друга?

При этом все элементы находятся .mystyle и, при использовании float, выпадают за границы mystyle example

2 ответа 2

2

Возможно, вот такой вариант вам подойдет:

.inputfields {
  display: inline;
}

.inputfields:after {
  content: "";
  display: table;
  clear: both;
}

#buttonsright {
  float: right;
  width: 30%;
}

#buttonsleft {
  float: left;
  width: 30%;
}

#buttonsleft input {
  font-size: 12px;
  padding: 4px 2px;
  border: solid 1px burlywood;
  width: 100%;
  margin: 2px 0 20px;
  border-radius: 5px;
  display: block;
}

#buttonsright input {
  font-size: 12px;
  padding: 4px 2px;
  border: solid 1px burlywood;
  width: 100%;
  margin: 2px 0 20px;
  border-radius: 5px;
  display: block;
}
<div class="mystyle">
  <h1>All values</h1>
  <div class="inputfields">
    <br>
    <div id="buttonsleft">
      <INPUT TYPE="BUTTON" VALUE="<1-1>" ONCLICK="">
      <INPUT TYPE="BUTTON" VALUE="<1-2>" ONCLICK="">
      <INPUT TYPE="BUTTON" VALUE="<1-3>" ONCLICK="">
    </div>
    <div id="buttonsright">
      <INPUT TYPE="BUTTON" VALUE="<2-1>" ONCLICK="">
      <INPUT TYPE="BUTTON" VALUE="<2-2>" ONCLICK="">
      <INPUT TYPE="BUTTON" VALUE="<2-3>" ONCLICK="">
    </div>
  </div>
</div>

5
  • 1
    Ещё бы clearfix для .inputfields 6 сен 2017 в 21:19
  • @MedvedevDev точно, добавил.
    – Dmitry B.
    6 сен 2017 в 21:25
  • У всех элементов есть еще общий предок .mystyle, в котором они должны находиться. При использовании float они из него выпадают (добавил к вопросу css и скриншот) 6 сен 2017 в 21:31
  • 1
    @ArtemVyazovetskov может вы высоту блоку .mystyle задали маленькую и поэтому элементы не помещаются? Вот еще один пример. Добавил фон для блока .mystyle jsfiddle.net/7gzvzL96
    – Dmitry B.
    6 сен 2017 в 21:56
  • Тут проблема в том, что в оригинале эти кнопки генерируются циклом на основании значении из базы данных. Их количество может меняться. При использовании display блок .mystyle подстраивается по размеру под количество элементов. Пример: image.ibb.co/eLuR4F/example.png 6 сен 2017 в 22:08
1

flex'Ы для этого и создали....

body {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

p,
h1,
form,
button {
  border: 0;
  margin: 0;
  padding: 0;
}

.mystyle {
  border: solid 2px burlywood;
  background-color: antiquewhite;
  border-radius: 5px;
}

.inputfields {
  display: flex;
  width: auto;
  height: auto;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: orange;
}

.mystyle h1 {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

#buttonsright {
  display: flex;
  height: auto;
  width: 30%;
  flex-direction: column;
  justify-content: center;
}

#buttonsleft {
  display: flex;
  height: auto;
  width: 30%;
  flex-direction: column;
  justify-content: center;
}

#buttonsleft input {
  font-size: 12px;
  padding: 4px 2px;
  border: solid 1px burlywood;
  width: 100%;
  margin: 2px 0 20px;
  border-radius: 5px;
  display: block;
}

#buttonsright input {
  font-size: 12px;
  padding: 4px 2px;
  border: solid 1px burlywood;
  width: 100%;
  margin: 2px 0 20px;
  border-radius: 5px;
  display: block;
}
<div class="mystyle">
  <h1>All values</h1>
  <div class="inputfields">
    <div id="buttonsleft">
      <INPUT TYPE="BUTTON" VALUE="<1-1>" ONCLICK="">
      <INPUT TYPE="BUTTON" VALUE="<1-2>" ONCLICK="">
      <INPUT TYPE="BUTTON" VALUE="<1-3>" ONCLICK="">
    </div>
    <div id="buttonsright">
      <INPUT TYPE="BUTTON" VALUE="<2-1>" ONCLICK="">
      <INPUT TYPE="BUTTON" VALUE="<2-2>" ONCLICK="">
      <INPUT TYPE="BUTTON" VALUE="<2-3>" ONCLICK="">
    </div>
  </div>

7
  • При таком варианте выравнивание блока buttonsleft по левому краю из-за justify-content: space-between; слетает - он смещается к центру. 6 сен 2017 в 22:22
  • у меня почему не слетает интересно?
    – Air
    6 сен 2017 в 22:24
  • ну ка поподробней если не трудно?
    – Air
    6 сен 2017 в 22:25
  • Виноват, накосячил. Скопировал только css. Спасибо! 6 сен 2017 в 22:30
  • ок))) рад был помочь....
    – Air
    6 сен 2017 в 22:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.