1

HTML:

<label class="label">
  <span class="label-span label-span-selected"></span>
</label>
<label class="label">
  <span class="label-span"></span>
</label>
<label class="label">
  <span class="label-span"></span>
</label>

CSS:

.label{
  margin: 0 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background-color: #fff;
  border-radius: 50%;
}
.label-span{
  display: block;
  width: 16px;
  height: 16px;
  background-color: #777;
  border-radius: 50%;
}
.label-span-selected{
  background-color: #333;
}

Когда увеличиваю масштаб страницы (CRTL+), в браузере label-span становится криво (при разных масштабах): расположение label-span при разных масштабах

Выглядит не так, как хотелось бы, но вроде я всё правильно написал, так что прошу опытных коллег дать советы, как избежать этой ситуации?

1 ответ 1

3

Например, так (я намеренно изменил цвет фона на красный, чтобы его было видно на белом фоне сайта):

.label{
  display: inline-block;
  margin: 0 3px;
  width: 20px;
  height: 20px;
  padding: 2px;
  background-color: red;
  border-radius: 50%;
}
.label-span{
  display: block;
  width: 100%;
  height: 100%;
  background-color: #777;
  border-radius: 50%;
}
.label-span-selected{
  background-color: #333;
}
<label class="label">
  <span class="label-span label-span-selected"></span>
</label>
<label class="label">
  <span class="label-span"></span>
</label>
<label class="label">
  <span class="label-span"></span>
</label>

Ваш ответ

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

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