0

подскажите как убрать справа и слева отступы между button

#calculator {
  margin: 0 auto;
  display: block;
  width: 292px
}

#calculator .panel {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between
}

#calculator .value-input {
  color: #fff;
  font-size: 60px;
  text-align: right
}

#calculator button {
  width: 70px;
  height: 70px;
  background-color: #d3d4d8;
  color: #45464a;
  border: 1px solid #000;
  display: inline-block
}

#calculator button:hover {
  cursor: pointer;
  background-color: #eeeef0
}

#calculator button:focus {
  outline: 0
}

#calculator .division,
#calculator button.result {
  background-color: #f97f10;
  color: #fff
}

#calculator .division:hover,
#calculator button.result:hover {
  background-color: #fa9a42
}

#calculator button.result {
  height: 100%
}
<div id="calculator">
  <div class="value-input" id="value">3434343</div>
  <div class="operators">
    <button>+</button>
    <button>-</button>
    <button>&times;</button>
    <button id="division" class="division">&divide;</button>
  </div>
  <div class="panel">
    <div class="leftPanel">
      <div class="number">
        <button>7</button>
        <button>8</button>
        <button>9</button>
      </div>
      <div class="number">
        <button>4</button>
        <button>5</button>
        <button>6</button>
      </div>
      <div class="number">
        <button>1</button>
        <button>2</button>
        <button>3</button>
      </div>
      <div class="number">
        <button>1</button>
        <button>2</button>
        <button>3</button>
      </div>
      <div class="number">
        <button>0</button>
        <button>.</button>
        <button id="clear">C</button>
      </div>
    </div>
    <div class="rightPanel">
      <button class="result" id="result">=</button>
    </div>
  </div>
</div>

1

3 ответа 3

2

Самое простое это написать в разметке эти элементы в линию ... Например так :

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

#calculator {
  margin: 0 auto;
  display: block;
  width: 292px
}

#calculator .panel {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: around;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: around
}

#calculator .value-input {
  color: #fff;
  font-size: 60px;
  text-align: right
}

#calculator button {
  width: 70px;
  height: 70px;
  background-color: #d3d4d8;
  color: #45464a;
  border: 1px solid #000;
  display: inline-block
}

#calculator button:hover {
  cursor: pointer;
  background-color: #eeeef0
}

#calculator button:focus {
  outline: 0
}

#calculator .division,
#calculator button.result {
  background-color: #f97f10;
  color: #fff
}

#calculator .division:hover,
#calculator button.result:hover {
  background-color: #fa9a42
}

#calculator button.result {
  height: 100%
}
<div id="calculator">
  <div class="value-input" id="value">3434343</div>
  <div class="operators">
    <button>+</button><button>-</button><button>&times;</button><button id="division" class="division">&divide;</button>
  </div>
  <div class="panel">
    <div class="leftPanel">
      <div class="number">
        <button>7</button><button>8</button><button>9</button>
      </div>
      <div class="number">
        <button>4</button><button>5</button><button>6</button>
      </div>
      <div class="number">
        <button>1</button><button>2</button><button>3</button>
      </div>
      <div class="number">
        <button>2</button><button>3</button>
      </div>
      <div class="number">
        <button>0</button><button>.</button><button id="clear">C</button>
      </div>
    </div>
    <div class="rightPanel"><button class="result" id="result">=</button></div>
  </div>
</div>

Но и не забываем в flexbox ставить не space-between а around

В песочнице это работает идеально : https://codepen.io/topicstarter/pen/jvYpNQ?editors=0100

screenshot с codepen.io

введите сюда описание изображения

1

Та просто добавь всюду в класс свойство

.mybutton{
margin-left:0px;
margin-right:0px;
}

Для боковых свои бока оставь

1

Как вариант можно обнулить размер шрифта для обёрток .operators и .panel а для кнопок восстановить #calculator button {font-size: 16px;}

#calculator {
  display: block;
  width: 292px;
  margin: 0 auto
}

#calculator .panel {
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row
}

#calculator .value-input {
  color: #fff;
  font-size: 60px;
  text-align: right
}

#calculator button {
  width: 70px;
  height: 70px;
  background-color: #d3d4d8;
  color: #45464a;
  border: 1px solid #000;
  display: inline-block;
  font-size: 16px
}

.panel,
.operators {
  font-size: 0
}

#calculator button:hover {
  cursor: pointer;
  background-color: #eeeef0
}

#calculator button:focus {
  outline: 0
}

#calculator .division,
#calculator button.result {
  background-color: #f97f10;
  color: #fff
}

#calculator .division:hover,
#calculator button.result:hover {
  background-color: #fa9a42
}

#calculator button.result {
  height: 100%
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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