1

Всем привет, как сделать, чтоб текст блока .users не отодвигал блок .guests

.total {text-align:center;float:left}
#tnum {background:#fff;border:3px solid#222;border-radius:50px;padding: 9px 14px;line-height:40px;text-align:center;width:30px}
.users {text-align:center;float:left}
#unum {background:#fff;border:3px solid #008000;border-radius:50px;padding: 9px 14px;line-height:40px;text-align:center;width:30px}
.guests {text-align:center;float:left}
#gnum {background:#fff;border:3px solid #d6d6d6;border-radius:50px;padding: 9px 14px;line-height:40px;text-align:center;width:30px}
.total, .users, .guests {margin:10px;}
<div class="total">
  <div id="tnum">20</div>
  Всего
</div> 
<div class="users">
  <div id="unum">10</div>
  Пользователи
</div>
<div class="guests">
  <div id="gnum">10</div>
  Гости 
</div> 

1 ответ 1

0

Потому что в двух случаях круг определяет ширину плавающего блока и текст центрируется, а в среднем текст шире блока, он как бы отцентрирован (но занимает всю ширину), а вот блок над ним не является текстом и равняется по левому краю. Проблему решает margin:auto, но лучше переписать код следующим образом:

.item {
  text-align: center;
  float: left;
  margin: 10px;
}

.num {
  background: #fff;
  border: 3px solid;
  border-radius: 50%;
  line-height: 50px;
  width: 50px;
  margin: auto;
  text-align: center;
}

#tnum { border-color: #222;    }
#unum { border-color: #008000; }
#gnum { border-color: #d6d6d6; }
<div class="item total">
  <div id="tnum" class="num">20</div>
  Всего
</div> 
<div class="item users">
  <div id="unum" class="num">10</div>
  Пользователи
</div>
<div class="item guests">
  <div id="gnum" class="num">10</div>
  Гости 
</div>

Ваш ответ

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

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