Блог

Главная - Вопросы по программированию - Система звездных оценок в RTL

Система звездных оценок в RTL

#html #css

#HTML #css

Вопрос:

У меня есть система звездного рейтинга, которая строится только с использованием HTML и CSS, слева направо она работает нормально, но справа налево она все еще находится слева направо, я хочу, чтобы первая звезда справа была заполнена первой, а последняя (5) была заполнена недавно. Как я могу заполнить направление звезды справа налево.

 .rate {
  display: flex;
  height: 46px;
  padding: 0 10px;
}

.rate:not(:checked)>input {
  position: absolute;
  top: -9999px;
  visibility: hidden;
}

.rate:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: #ccc;
}

.rate:not(:checked)>label:before {
  content: '★ ';
}

.rate>input:checked~label {
  color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
  color: #deb217;
}  
 <div class="rate" onclick="validate()">
  <input type="radio" id="star5" class="star" name="rate" value="5" />
  <label for="star5">5 stars</label>
  <input type="radio" id="star4" class="star" name="rate" value="4" />
  <label for="star4">4 stars</label>
  <input type="radio" id="star3" class="star" name="rate" value="3" />
  <label for="star3">3 stars</label>
  <input type="radio" id="star2" class="star" name="rate" value="2" />
  <label for="star2">2 stars</label>
  <input type="radio" id="star1" class="star" name="rate" value="1" />
  <label for="star1">1 star</label>

Комментарии:

1. Похоже, что предоставленный вами код уже работает так, как вы хотите: справа налево (?)

2. да, я не знаю, работает ли это здесь, но на моем веб-сайте это не работает

3. Вы пробовали использовать синтаксис «direction». Возможно, вы можете решить эту проблему, чтобы передать ее одному из родительских классов.

4. да, большое вам спасибо, решаемая с помощью direction. @GeorgeDiril

5. Всегда пожалуйста. Итак, я просто ввожу это в качестве ответа ниже.

Ответ №1:

не слишком уверен, что ваш код работает, почему-то мне показалось, что он работает наоборот, сначала освещая весь ряд звездочек.

Вы можете встроить flex box, он унаследует поток direction, и если вы также поместите звезды в контейнер, вы также можете изменить его собственный поток, чтобы изменить визуальную нотацию звезд.

пример :

 .rate {
  display: flex;
  height: 46px;
  padding: 0 10px;
}
.rate span {
  display: inline-flex;
  flex-flow: row-reverse;

  margin:auto 1em;
}
.rtl {
  direction: rtl;
}
.rate:not(:checked) > span input {
  position: absolute;
  right: 100vw;
}

.rate:not(:checked) > span label {
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: #ccc;
}

.rate:not(:checked) > span label:before {
  content: "★ ";
}

.rate > span input:checked ~ label {
  color: #ffc700;
}

.rate:not(:checked) > span label:hover,
.rate:not(:checked) > span label:hover ~ label {
  color: #deb217;
}  
 <div dir ="rtl" class="rate" onclick="validate()">
  <span>
    <input type="radio" id="star5" data-product-id="@Model.ProductId" class="star" name="rate" value="5" />
    <label for="star5"  title="5 Stars">5 stars</label>
    <input type="radio" id="star4" data-product-id="@Model.ProductId" class="star" name="rate" value="" />
    <label for="star4"  title="4 Star">4 stars</label>
    <input type="radio" id="star3" data-product-id="@Model.ProductId" class="star" name="rate" value="3" />
    <label for="star3" title="3 Star">3 stars</label>
    <input type="radio" id="star2" data-product-id="@Model.ProductId" class="star" name="rate" value="2" />
    <label for="star2" title="2 Stars">2 stars</label>
    <input type="radio" id="star1" data-product-id="@Model.ProductId" class="star" name="rate" value="1" />
    <label for="star1" title="1 Star">1 star</label>  
  </span>
  <p>אני מניח שיש כאן הודעה?</p>
</div>
<hr>
<div class="rate" onclick="validate()">
  <span>
    <input type="radio" id="star5a" data-product-id="@Model.ProductId" class="star" name="rate" value="5" />
    <label for="star5a"  title="5 Stars">5 stars</label>
    <input type="radio" id="star4a" data-product-id="@Model.ProductId" class="star" name="rate" value="" />
    <label for="star4a"  title="4 Star">4 stars</label>
    <input type="radio" id="star3a" data-product-id="@Model.ProductId" class="star" name="rate" value="3" />
    <label for="star3a" title="3 Star">3 stars</label>
    <input type="radio" id="star2a" data-product-id="@Model.ProductId" class="star" name="rate" value="2" />
    <label for="star2a" title="2 Stars">2 stars</label>
    <input type="radio" id="star1a" data-product-id="@Model.ProductId" class="star" name="rate" value="1" />
    <label for="star1a" title="1 Star">1 star</label>  
  </span>
  <p>I guess there is content aside here ?</p>
</div>

Несколько ссылок, которые могли бы быть полезны в стороне от этого ответа.

Ответ №2:

Направление справа налево или слева направо связано с direction синтаксисом в CSS. https://www.w3schools.com/cssref/pr_text_direction.asp

Таким образом, вы можете иметь справа налево с:

 direction: rtl;

и слева направо с:

 direction: ltr;

Комментарии:

1. Спасибо, это сработало нормально, но решение: display: inline-flex; flex-flow: row-reverse; это идеально подходит для моего дизайна, еще раз спасибо

Ответ №3:

Я использовал свойство flex flow со значением, обратным строке. Я думаю, что это решение может помочь вам решить вашу проблему. И я использовал свойство float с левым значением, чтобы перевести rate div в левую позицию.

 .rate {
  display: flex;
  height: 46px;
  padding: 0 10px;
  flex-flow: row-reverse wrap;
  float: left;
}

.rate:not(:checked)>input {
  position: absolute;
  top: -9999px;
  visibility: hidden;
}

.rate:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: #ccc;
}

.rate:not(:checked)>label:before {
  content: '★ ';
}

.rate>input:checked~label {
  color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
  color: #deb217;
}  
 <div class="rate" onclick="validate()">
  <input type="radio" id="star5" class="star" name="rate" value="5" />
  <label for="star5">5 stars</label>
  <input type="radio" id="star4" class="star" name="rate" value="4" />
  <label for="star4">4 stars</label>
  <input type="radio" id="star3" class="star" name="rate" value="3" />
  <label for="star3">3 stars</label>
  <input type="radio" id="star2" class="star" name="rate" value="2" />
  <label for="star2">2 stars</label>
  <input type="radio" id="star1" class="star" name="rate" value="1" />
  <label for="star1">1 star</label>