CSS - метка и флажок не совпадают с другими метками и флажком - PullRequest
Новая
       37

CSS - метка и флажок не совпадают с другими метками и флажком

0 голосов
/ 27 января 2019

Я делаю небольшой опрос, и мои "метка-флажок" и флажки не будут совпадать с другими метками.Все метки имеют одинаковый класс.Мне нужно, чтобы он выровнялся так же, как и другие.

Вот ссылка на мой кодовый блок, чтобы показать вам, что я имею в виду:

https://codepen.io/Saharalara/pen/xMGqPa

.labels {
  display: inline-block;
  text-align: right;
  vertical-align: top;
  margin-top: 20px;
  width: 40%;
  padding: 5px;
}

.rightTab {
  display: inline-block;
  text-align: left;
  margin-top: 20px;
  vertical-align: middle;
  width: 48%;
  padding: 5px;
}

.radio,
.checkbox {
  position: relative;
  left: -44px;
  display: block;
  padding-bottom: 10px;
}
<div class="rowTab">
  <div class="labels">
    <label id="checkbox-label" for="changes">What do you think we should do to improve our fabulous toilet if any...</br>there should'nt be any but choose please:</label>
  </div>
  <div class "rightTab">
    <ul id="changes">
      <li class="checkbox"><label><input name="prefer" value="1" type="checkbox" class="userRatings">Cleanliness</label></li>
      <li class="checkbox"><label><input  name="prefer" value="2" type="checkbox" class="userRatings">Friendliness</label></li>
      <li class="checkbox"><label><input  name="prefer" value="3" type="checkbox" class="userRatings">Everything, it's shite</label></li>
      <li class="checkbox"><label><input  name="prefer" value="4" type="checkbox" class="userRatings">Nothing, it's fantastic</label></li>
      <li class="checkbox"><label><input  name="prefer" value="5" type="checkbox" class="userRatings">No changes required, it's is the best toilet I've ever been to</label></li>
    </ul>
  </div>
</div>

1 Ответ

0 голосов
/ 27 января 2019

Вы пропустили =.И в этом случае это очень важно.Измените 

<div class "rightTab">

... на: 

<div class="rightTab">

См. здесь работает .

...