Почему мои элементы CSS разнесены сами по себе? - PullRequest
Новая
       69

Почему мои элементы CSS разнесены сами по себе?

0 голосов
/ 07 августа 2020

Я работаю над проектом, но мои элементы сильно разнесены, и я не лучший в CSS. Я не знаю, делает ли он это самостоятельно или что-то не так с моим CSS. Не могли бы вы помочь найти проблему? 

  <body>
    <div class='top'>
      <div class='top-left'>
        <input type='text' class='info' id='totalBill' placeholder='Total bill'>
        <input type='text' class='info' id='peopleAmount' placeholder='People'>
      </div>
      <div class='top-right'>
        <div class='tip'>
          <input type='text' class='info' id='tip' placeholder='Tip (in percent)'>
        </div>
        <button onclick = "calculate()"> Calculate </button>
      </div>
    </div>
    <div class="bottom">
      <input id="output" disabled>
      <input id="moneyOutput" disabled>
    </div>
  </body>
</html>

CSS Ссылка на файл - https://aaryank.codewizardshq.com/BillSplitter/style.css

1 Ответ

0 голосов
/ 07 августа 2020

Просто замените justify-content: space-around; на justify-content: center;, это оставит небольшое пространство между вашими input s, а также уменьшит height, если вам нравится следующее в отредактированном коде 

* {
  outline: none;
  border: none;
  font-family: 'Fira Sans', sans-serif;
  margin: 0;
}

.top-left,
.top-right {
  position: absolute;
  height: 60vh;
  width: 50vw;
  top: 0;
}

.top-right {
  right: 0;
  background: #7ACFD7;
}

.top-left {
  left: 0;
  background-color: #C22629;
}

.bottom {
  position: absolute;
  height: 40vh;
  /*edited from height: 60vh;*/
  width: 100vw;
  bottom: 0;
  left: 0;
  background-color: #F1EFEE;
}

.top-left,
.top-right,
.bottom {
  flex-direction: column;
  display: flex;
  justify-content: center;
  /*Edited from justify-content: space-around;*/
  place-items: center;
}


/**/

input[class='info'] {
  font-size: 20px;
  padding: 15px;
  border-radius: 5px;
  background: #FFF;
  margin: 10px;
  font-family: 'Fira Sans', sans-serif;
  display: block;
}

input,
input::placeholder {
  color: grey;
}

button {
  font-size: 18px;
  padding: 15px;
  width: 50%;
  ;
  background-color: transparent;
  color: #F1EFEE;
  border: 3px solid #F1EFEE;
  border-radius: 10px;
  cursor: pointer;
}

#output {
  font-size: 20px;
  background-color: transparent;
  border-radius: 5px;
  text-align: center;
  color: black;
  width: 50%;
}

#moneyOutput {
  font-size: 50px;
  padding: 5px;
  background-color: transparent;
  border-radius: 5px;
  text-align: center;
  color: black;
  width: 50%;
}
<div class='top'>
  <div class='top-left'>
    <input type='text' class='info' id='totalBill' placeholder='Total bill'>
    <input type='text' class='info' id='peopleAmount' placeholder='People'>
  </div>
  <div class='top-right'>
    <div class='tip'>
      <input type='text' class='info' id='tip' placeholder='Tip (in percent)'>
    </div>
    <button onclick="calculate()"> Calculate </button>
  </div>
</div>
<div class="bottom">
  <input id="output" disabled>
  <input id="moneyOutput" disabled>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...