星级评分（Rating stars）组件垂直排列问题求助

你的评分星星出现垂直排列的问题，核心原因有两个：

• .cont容器宽度仅设为20px，空间不足导致星星只能垂直堆叠
• 星星对应的input标签被设置了transform: rotate(90deg)，旋转后进一步打乱了水平排列逻辑

下面是修复后的完整代码，关键修改点已标注：

修改后的CSS代码 #

/* New Rating CSS code */

.Cont {
  position: absolute;
  width: 633px;
  height: 438px;
  left: 413px;
  top: 252px;
  background: #F1F2F0;
  padding: 25px;
  border-radius: 9px;
  box-shadow: 4px 4px 2px rgba(230, 254, 164, 0.5); /* 修正原代码中无效的颜色值写法 */
}

.cont {
  position: relative; /* 从absolute改为relative，避免脱离文档流导致布局混乱 */
  /* 移除原有的width:20px，改为自适应宽度 */
  background: #f1f2f0;
  padding: 10px 10px;
  border: 1px solid gray;
  border-radius: 10px;
  display: flex; /* 添加flex布局，让内部元素水平排列 */
  align-items: center;
  justify-content: center;
  /* flex-direction: row-reverse; 如果需要从右往左选星，可以开启这个 */
}

.cont .post {
  display: none;
}

.cont .text {
  font-size: 25px;
  color: #000;
  font-weight: 500;
}

.cont .edit {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 16px;
  color: #000;
  font-weight: 500;
  cursor: pointer;
}

.cont .edit:hover {
  text-decoration: underline;
}

.cont .star-widget input {
  /* 移除transform: rotate(90deg)，让星星保持正常水平方向 */
  display: none;
}

.star-widget label {
  font-size: 40px;
  position: relative;
  color: #ccc; /* 把默认颜色从白色改为灰色，在浅色背景上更明显 */
  padding: 10px;
  float: right; /* 保持右浮动，实现从高到低评分的交互逻辑 */
  transition: all 0.2s ease;
}

input:not(:checked)~label:hover,
input:not(:checked)~label:hover~label {
  color: #fd4;
}

input:checked~label {
  color: #fd4;
}

input#rate-5:checked~label {
  color: #fe7;
  text-shadow: 0 0 20px #952;
}

.container form {
  display: none;
}

input:checked~form {
  display: block;
}

form header {
  width: 100%;
  font-size: 25px;
  color: #fe7;
  font-weight: 500;
  margin: 5px 0 20px 0;
  text-align: center;
  transition: all 0.2s ease;
}

form .textarea {
  height: 100px;
  width: 100%;
  overflow: hidden;
  margin-top: 20px; /* 添加margin，避免和星星区域重叠 */
}

form .textarea textarea {
  height: 130px;
  width: 100%; /* 从绝对定位改为相对宽度，适配容器 */
  outline: none; /* 修正原代码中无效的outline写法 */
  color: gray;
  border: 1px solid gray;
  background: #fff;
  padding: 10px;
  font-size: 16px;
  resize: none;
  box-sizing: border-box; /* 添加盒模型，避免超出容器 */
}

.textarea textarea:focus {
  border-color: #000;
}

form .btn {
  height: 30px;
  width: 100%; /* 改为相对宽度 */
  margin-top: 10px;
}

form .btn button {
  height: 100%;
  width: 100%;
  border: 0px solid #000;
  outline: none;
  background: #c5e8b4;
  color: #000;
  font-size: 17px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

form .btn button:hover {
  background: #b4d8a3; /* hover时稍微加深颜色，提升交互反馈 */
}

修改后的HTML代码 #

<div class="Cont">
  <form action="" method="post">
    <div class="cont">
      <div class="post">
        <div class="text">Success </div>
        <div class="edit">edit</div>
      </div>

      <div class="star-widget">
        <input type="radio" name="Rate" id="rate-5" value="5">
        <label for="rate-5" class="fas fa-star"></label>

        <input type="radio" name="Rate" id="rate-4" value="4">
        <label for="rate-4" class="fas fa-star"></label>

        <input type="radio" name="Rate" id="rate-3" value="3">
        <label for="rate-3" class="fas fa-star"></label>

        <input type="radio" name="Rate" id="rate-2" value="2">
        <label for="rate-2" class="fas fa-star"></label>

        <input type="radio" name="Rate" id="rate-1" value="1">
        <label for="rate-1" class="fas fa-star"></label>
      </div>
    </div>
    <div dir="ltr" class="textarea">
      <textarea name="Comment" cols="30" placeholder="Describe your experience in the website"></textarea>
    </div>
    <div class="btn">
      <button type="submit" name="submit">Send</button>
    </div>
  </form>
</div>

关键修改说明 #

1. 修复.cont容器：移除过窄宽度，改为flex布局，调整定位方式，确保星星有足够空间水平排列
2. 移除星星input的旋转样式，恢复正常方向
3. 修正textarea和按钮的绝对定位问题，改为相对宽度，避免布局重叠
4. 优化颜色和交互细节，提升视觉效果和用户体验

内容的提问来源于stack exchange，提问作者Hadeel