Заполнение дополнительного пространства в HTML / CSS - PullRequest
Новая
       15

Заполнение дополнительного пространства в HTML / CSS

0 голосов
/ 18 февраля 2019

Как мне заполнить это кружок?Я хочу знать, как заполнить оставшуюся синюю область белым фоновым цветом.

Я пытался увеличить отступы, но это двигало цену все ниже и ниже и немного влево каждый раз, когда я увеличивал отступы.

enter image description here

Мой HTML выглядит следующим образом .. 

section {
  background-color: white;
}

#repair-tagline h1 {
  background-color: white;
  font-family: 'Open Sans Condensed', sans-serif;
  letter-spacing: 0.2rem;
  font-size: 3rem;
  text-align: center;
  padding: 40px 0 40px 0;
}

.repair-option {
  background-color: rgb(0, 0, 77);
  width: 80%;
  padding: 50px 50px 50px 50px;
  margin: 0px auto 50px auto;
}

.repair-type,
.repair-price {
  display: inline-block;
  color: white;
}

.repair-type {
  font-size: 2rem;
}

.repair-price {
  float: right;
  background-color: white;
  border: 1px solid black;
  color: black;
  font-size: 2rem;
}
<section>
  <div class="repair">
    <div id="repair-tagline">
      <h1>Choose Your Vacuum Cleaner Repair Option:</h1>
    </div>
    <div class="repair-option">
      <div class="repair-type">
        <h1>Belt Repair</h1>
      </div>
      <div class="repair-price">
        <h1>$10.00</h1>
      </div>
    </div>
    <div class="repair-option">
      <div class="repair-type">
        <h1>Brush-Roll Repair</h1>
      </div>
      <div class="repair-price">
        <h1>$20.00</h1>
      </div>
    </div>
  </div>
</section>

1 Ответ

0 голосов
/ 18 февраля 2019

Удалите отступы из класса repair-option и добавьте отдельные отступы к 2 дочерним элементам div (repair-type и repair-price).Таким образом, у каждого из них были отдельные отступы, что означает, что цвет фона соответствует div.

Заполнение для .repair-price может выглядеть странно, но я просто сделал это, потому что он не выстраивался в линию.Вы можете изменить все отступы, как вы хотите.

section {
  background-color: white;
}

#repair-tagline h1 {
  background-color: white;
  font-family: 'Open Sans Condensed', sans-serif;
  letter-spacing: 0.2rem;
  font-size: 3rem;
  text-align: center;
  padding: 40px 0 40px 0;
}

.repair-option {
  background-color: rgb(0, 0, 77);
  width: 80%;
  padding: 0px;
  margin: 0px auto 50px auto;
}

.repair-type,
.repair-price {
  display: inline-block;
  color: white;
}

.repair-type {
  font-size: 2rem;
  padding: 10px;
}

.repair-price {
  float: right;
  background-color: white;
  border: 1px solid black;
  color: black;
  font-size: 2rem;
  padding: 10px 0px 8px 0px;
}
<section>
  <div class="repair">
    <div id="repair-tagline">
      <h1>Choose Your Vacuum Cleaner Repair Option:</h1>
    </div>
    <div class="repair-option">
      <div class="repair-type">
        <h1>Belt Repair</h1>
      </div>
      <div class="repair-price">
        <h1>$10.00</h1>
      </div>
    </div>
    <div class="repair-option">
      <div class="repair-type">
        <h1>Brush-Roll Repair</h1>
      </div>
      <div class="repair-price">
        <h1>$20.00</h1>
      </div>
    </div>
  </div>
</section>
...