Не позиционируются

thefo

Ребят есть 6 кнопок их нужно расположить друг на против друга, но я не знаю как если им указать position они налезают друг на друга. Помогите пожалуйста.
<html>
 <head>
  <title></title>
     <script>
 
     </script>
  <style>
  .but {
              width: 17%;
                height: 23%;
                background-color: beige;
                border-radius: 90%;
                margin-left:11% ;
                margin-top: 1%;
            }
            .but1 {
                 width: 17%;
                height: 23%;
                background-color: beige;
                border-radius: 90%;
                margin-left: 11%;
                margin-top: 1%;
            }
            .but2 {
                 width: 17%;
                height: 23%;
                background-color: beige;
                border-radius: 90%;
                margin-left: 11%;
                margin-top: 1%;
            }
          .but3 {
              width: 17%;
                height: 23%;
                background-color: beige;
                border-radius: 90%;
                margin-right:17% ;
                margin-top: -51.5%;
            }
            .but4 {
                 width: 17%;
                height: 23%;
                background-color: beige;
                border-radius: 90%;
                margin-right: 17%;
                margin-top: -34.5%;
            }
            .but5 {
                 width: 17%;
                height: 23%;
                background-color: beige;
                border-radius: 90%;
                margin-right: 17%;
                margin-top: -17.4%;
            }
  </style>
 </head>
 <body>
     <input type = 'button' id = 'but' class = 'but' value = '1' /><br />
        <input type = 'button' id = 'but1' class = 'but1' value = '2' /><br />
        <input type = 'button' id = 'but2' class = 'but2' value = '3' />
        </div><br />
        <div align = 'right'>
        <input type = 'button' id = 'but3' class = 'but3' value = '4' /><br />
        <input type = 'button' id = 'but4' class = 'but4' value = '5' /><br />
        <input type = 'button' id = 'but5' class = 'but5' value = '6' />
 </body>
</html>
Заранее спасибо.
2 ответа

thefo

thefo, ну зачаток решения в вашем коде есть, доделать вы его почему-то не смогли. Оборачиваете левые кнопки в блок с классом left, а правые в правый с классом right и присваиваете стили:
 .left {
   width: 50%;
   float: left;
 }
 .right {
   width: 50%;
   float: right;
 }


thefo

<html>
<head>
 
    <title></title>
    <script>
 
    </script>
    <style>
        .but {
            width: 34%;
            height: 23%;
            background-color: beige;
            border-radius: 90%;
 
        }
        .but1 {
            width: 34%;
            height: 23%;
            background-color: beige;
            border-radius: 90%;
 
        }
        .but2 {
            width: 34%;
            height: 23%;
            background-color: beige;
            border-radius: 90%;
 
        }
        .but3 {
            width: 34%;
            height: 23%;
            background-color: beige;
            border-radius: 90%;
 
        }
        .but4 {
            width: 34%;
            height: 23%;
            background-color: beige;
            border-radius: 90%;
 
        }
        .but5 {
            width: 34%;
            height: 23%;
            background-color: beige;
            border-radius: 90%;
 
        }
        .wrapper {
            width:100%;
        }
        .left {
            text-align: right;  
            float:left;
            width:50%;
        }
 
        .right {
            text-align: left;
            float:right;
            width:50%;
        }
    </style>
</head>
<body> 
    <div class="wrapper">
        <div class="left">
            <input type = 'button' id = 'but' class = 'but' value = '1'><br>
            <input type = 'button' id = 'but1' class = 'but1' value = '2'><br>
            <input type = 'button' id = 'but2' class = 'but2' value = '3'>
        </div>
        <div class="right">
            <input type = 'button' id = 'but3' class = 'but3' value = '4'><br>
            <input type = 'button' id = 'but4' class = 'but4' value = '5'><br>
            <input type = 'button' id = 'but5' class = 'but5' value = '6'>
        </div>
    </div>        
</body>
</html>