CSS флажки со скошенными метками - PullRequest
Новая
       0

CSS флажки со скошенными метками

2 голосов
/ 26 февраля 2020

Я пытался установить флажки со скошенным текстом, как показано на рисунке ниже (где необходим некоторый уровень перекрытия):

checkboxes with slanted text

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

(это внутри динамическая c таблица, где строки будут дублироваться, поэтому я использовал «span» вместо «label for», чтобы избежать сложностей с генерацией уникальных идентификаторов для всех флажков) 

table tbody {
  display: block;
}

.angled_text {
  display: block;
  margin-top: -18px;
  transform:         rotate(-45deg);

  /* legacy */
  -webkit-transform: rotate(-45deg);
  -moz-transform:    rotate(-45deg);
  -ms-transform:     rotate(-45deg);
  -o-transform:      rotate(-45deg);
}
<!DOCTYPE html>
<html lang="en">
<body>
  <table id="dynamic_table">
    <tbody>
      <tr>
        <td>
          <span class="angled_text">Monday</span>
          <span class="angled_text">Tuesday</span>
          <span class="angled_text">Wednesday</span>
          <span class="angled_text">Thursday</span>
          <span class="angled_text">Friday</span>
          
          <br>
  
          <input type="checkbox" name="monday" value="monday">
          <input type="checkbox" name="tuesday" value="tuesday">
          <input type="checkbox" name="wednesday" value="wednesday">
          <input type="checkbox" name="thursday" value="thursday">
          <input type="checkbox" name="friday" value="friday">
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Ответы [ 4 ]

3 голосов
/ 26 февраля 2020

Я бы так и сделал. Оберните ввод внутри метки, чтобы сделать его кликабельным. Позиционирование дочернего диапазона с использованием абсолютного позиционирования, чтобы вывести его за пределы нормального потока. И добавьте достаточное количество отступов в верхней части div, чтобы ярлыки не обрезались. 

div {
  padding-top: 55px;
}
label.angled_text {
  margin-left: 4px;
  display: inline-block;
  position: relative;
}

label.angled_text span {
  position: absolute;
  top: -14px;
  left: .5em;
  
  transform-origin: bottom left;
  transform: rotate(-45deg);
  /* legacy */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}
<!DOCTYPE html>
<html lang="en">

<body>
  <div>
    <label class="angled_text">
      <input type="checkbox" name="monday" value="monday">
      <span>Monday</span>
    </label>
    <label class="angled_text">
      <input type="checkbox" name="tuesday" value="tuesday">
      <span>Tuesday</span>
    </label>
    <label class="angled_text">
      <input type="checkbox" name="wednesday" value="wednesday">
      <span>Wednesday</span>
    </label>
    <label class="angled_text">
      <input type="checkbox" name="thursday" value="thursday">
      <span>Thursday</span>
    </label>
    <label class="angled_text">
      <input type="checkbox" name="friday" value="friday">
      <span>Friday</span>
    </label>
  </div>
</body>

</html>
2 голосов
/ 26 февраля 2020

Вы можете изменить display: inline-block и установить его ширину.

Причина установки width состоит в том, что transform изменяет только способ отображения элемента, но его оригинальное пространство и Положение остается прежним. Установив width, вы фактически изменяете исходное вертикальное пространство, которое существует между метками. 

table {
  margin-top: 50px;
}
table tbody {
  display: block;
}

.angled_text {
  display: inline-block;
  width: 18px;
  transform:         rotate(-45deg);

  /* legacy */
  -webkit-transform: rotate(-45deg);
  -moz-transform:    rotate(-45deg);
  -ms-transform:     rotate(-45deg);
  -o-transform:      rotate(-45deg);
}
<!DOCTYPE html>
<html lang="en">
<body>
  <table id="dynamic_table">
    <tbody>
      <tr>
        <td>
          <span class="angled_text">Monday</span>
          <span class="angled_text">Tuesday</span>
          <span class="angled_text">Wednesday</span>
          <span class="angled_text">Thursday</span>
          <span class="angled_text">Friday</span>
          
          <br>
  
          <input type="checkbox" name="monday" value="monday">
          <input type="checkbox" name="tuesday" value="tuesday">
          <input type="checkbox" name="wednesday" value="wednesday">
          <input type="checkbox" name="thursday" value="thursday">
          <input type="checkbox" name="friday" value="friday">
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>
0 голосов
/ 26 февраля 2020

Использование Table

table tbody {
  display: block;
}

.angled_text {
  display: block;
  margin-top: -18px;
  transform:         rotate(-45deg);

  /* legacy */
  -webkit-transform: rotate(-45deg);
  -moz-transform:    rotate(-45deg);
  -ms-transform:     rotate(-45deg);
  -o-transform:      rotate(-45deg);
}
<!DOCTYPE html>
<html lang="en">
<body>
  <table id="dynamic_table">
    <tbody>
      <tr>
        <td>
          <span class="angled_text">Monday</span>
          </td>
          <td>
          <span class="angled_text">Tuesday</span>
          </td>
          <td>
          <span class="angled_text">Wednesday</span>
          </td>
          <td>
          <span class="angled_text">Thursday</span>
          </td>
          <td>
          <span class="angled_text">Friday</span>
          </td>
          </tr>
          <tr>
          <br>
          <td><br>
          <input type="checkbox" name="monday" value="monday">
          </td>
          <td><br>
          <input type="checkbox" name="tuesday" value="tuesday">
          </td>
          <td><br>
          <input type="checkbox" name="wednesday" value="wednesday">
          </td>
          <td><br>
          <input type="checkbox" name="thursday" value="thursday">
          </td>
          <td><br>
          <input type="checkbox" name="friday" value="friday">
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

надеюсь, это поможет вам.

0 голосов
/ 26 февраля 2020

inline-block не обрежет его, поскольку вращение разрушает горизонтальное расположение. Вместо этого используйте flex макет. Обратите внимание, что css требует некоторой ручной настройки ширины и так далее. Может быть, есть более элегантный способ, но это делает работу: 

    <html lang="en">
    <body >
      <div class="flex labels">
        <span class="angled_text">Monday</span>
        <span class="angled_text">Tuesday</span>
        <span class="angled_text">Wednesday</span>
        <span class="angled_text">Thursday</span>
        <span class="angled_text">Friday</span>
      </div>

      <div class="flex">
        <input type="checkbox" name="monday" value="monday">
        <input type="checkbox" name="tuesday" value="tuesday">
        <input type="checkbox" name="wednesday" value="wednesday">
        <input type="checkbox" name="thursday" value="thursday">
        <input type="checkbox" name="friday" value="friday">
      </div>
    </body>
    </html>


    .flex {
      display: flex;
    }

    .labels {
      margin-top: 30px;
    }

    input {
      width: 30px;
    }

    .angled_text {
      display: block;
      width: 35px;
      position: relative;
      top: -10px;
      left: 5px;
      transform:         rotate(-45deg);

      /* legacy */
      -webkit-transform: rotate(-45deg);
      -moz-transform:    rotate(-45deg);
      -ms-transform:     rotate(-45deg);
      -o-transform:      rotate(-45deg);
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...