将提交按钮与 CSS 星号一起放置以创建评级表单答案

【问题标题】：Positioning a submit button along with CSS stars to create a rating form将提交按钮与 CSS 星号一起放置以创建评级表单
【发布时间】：2021-06-20 07:38:31
【问题描述】：

我正在尝试创建一个评分表单 - 我正在努力让“提交”按钮与我的 CSS 星号“很好地”对齐。

理想情况下，我希望我的页面看起来像这样：

------------------------------------------------------------
|                          * * * * * Submit                |
|                                                          |
|-----------------------------------------------------------
|                                                          |
|            BOTTOM PART                                   |
|                                                          |
------------------------------------------------------------

表单及其组件（即按钮和星星）的行为类似于一个内聚单元，并且可以作为一个组沿 X 和 Y 轴移动。

这是我迄今为止想出的：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        <style>
        .rate {
            display: inline-block;
            position: relative;
            height: 20px;
            line-height: 20px;
            font-size: 20px;
        }
        
        .rate label {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            cursor: pointer;
        }
        
        .rate label:last-child {
            position: static;
        }
        
        .rate label:nth-child(1) {
            z-index: 5;
        }
        
        .rate label:nth-child(2) {
            z-index: 4;
        }
        
        .rate label:nth-child(3) {
            z-index: 3;
        }
        
        .rate label:nth-child(4) {
            z-index: 2;
        }
        
        .rate label:nth-child(5) {
            z-index: 1;
        }
        
        .rate label input {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
        
        .rate label .icon {
            float: left;
            color: transparent;
        }
        
        .rate label:last-child .icon {
            color: #CACACA;
        }
        
        .rate:not(:hover) label input:checked ~ .icon,
        .rate:hover label:hover input ~ .icon {
            color: #ffd900;
        }
        
        .rate label input:focus:not(:checked) ~ .icon:last-child {
            color: #000;
            text-shadow: 0 0 5px #ffd900;
        }    
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <form class="rate">

                    <label title="Poor">
                        <input type="radio" name="stars" value="1"/>
                        <span class="icon">★</span>
                    </label>
                    <label title="Below average">
                        <input type="radio" name="stars" value="2"/>
                        <span class="icon">★</span>
                        <span class="icon">★</span>
                    </label>
                    <label title="Average">
                        <input type="radio" name="stars" value="3"/>
                        <span class="icon">★</span>
                        <span class="icon">★</span>
                        <span class="icon">★</span>   
                    </label>
                    <label title="Above average">
                        <input type="radio" name="stars" value="4"/>
                        <span class="icon">★</span>
                        <span class="icon">★</span>
                        <span class="icon">★</span>
                        <span class="icon">★</span>
                    </label>
                    <label title="Excellent">
                        <input type="radio" name="stars" value="5"/>
                        <span class="icon">★</span>
                        <span class="icon">★</span>
                        <span class="icon">★</span>
                        <span class="icon">★</span>
                        <span class="icon">★</span>
                    </label>
                    <!-- button class="btn-info btn btn-sm pull-right">Submit</button>-->
                </form>
            </div>
            <div class="row">
                Bottom part
            </div>
        </div>
    </body>
</html>

如何修复标记/CSS 以便：

按钮正确定位在表单中星星的右侧
启动和按钮可以作为一个单元沿 X、Y 轴“移动” - 通过设置边距等。

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

我认为这对你有帮助吗？

var unit = document.getElementById("wrapper");

function moveMeX() {
  unit.style.marginLeft = "130px";

}

function moveMeY() {
  unit.style.marginTop = "130px";

}

.rate {
  display: inline-block;
  position: relative;
  height: 20px;
  line-height: 20px;
  font-size: 20px;
}

.rate label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  cursor: pointer;
}

.rate label:last-child {
  position: static;
}

.rate label:nth-child(1) {
  z-index: 5;
}

.rate label:nth-child(2) {
  z-index: 4;
}

.rate label:nth-child(3) {
  z-index: 3;
}

.rate label:nth-child(4) {
  z-index: 2;
}

.rate label:nth-child(5) {
  z-index: 1;
}

.rate label input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.rate label .icon {
  float: left;
  color: transparent;
}

.rate label:last-child .icon {
  color: #CACACA;
}

.rate:not(:hover) label input:checked~.icon,
.rate:hover label:hover input~.icon {
  color: #ffd900;
}

.rate label input:focus:not(:checked)~.icon:last-child {
  color: #000;
  text-shadow: 0 0 5px #ffd900;
}


/* changes */

.row {
  display: block;
  margin-bottom: 15px;
}

#stars label {
  padding-top: 8px;
  margin-bottom: 0px;
}

#wrapper {
  display: flex;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

</head>

<body>
  <div class="container">
    <div class="row">
      <form class="rate">
        <div id="wrapper">
          <div id="stars">
            <label title="Poor">
                            <input type="radio" name="stars" value="1" />
                            <span class="icon">★</span>
                        </label>
            <label title="Below average">
                            <input type="radio" name="stars" value="2" />
                            <span class="icon">★</span>
                            <span class="icon">★</span>
                        </label>
            <label title="Average">
                            <input type="radio" name="stars" value="3" />
                            <span class="icon">★</span>
                            <span class="icon">★</span>
                            <span class="icon">★</span>
                        </label>
            <label title="Above average">
                            <input type="radio" name="stars" value="4" />
                            <span class="icon">★</span>
                            <span class="icon">★</span>
                            <span class="icon">★</span>
                            <span class="icon">★</span>
                        </label>
            <label title="Excellent">
                            <input type="radio" name="stars" value="5" />
                            <span class="icon">★</span>
                            <span class="icon">★</span>
                            <span class="icon">★</span>
                            <span class="icon">★</span>
                            <span class="icon">★</span>
                        </label>
          </div>
          <button class="btn-info btn btn-sm pull-right">Submit</button>
        </div>
      </form>
    </div>
    <div class="row">
      Bottom part
    </div>
  </div>


  <!--delete me !-->
  <button onclick="moveMeX()">'moved' as a single unit along the X axis</button>
  <button onclick="moveMeY()">'moved' as a single unit along the Y axis</button>

</body>

</html>

请注意我重写了 row 类的样式

我希望这会有所帮助！让我知道它是否对你有用，干杯！

【讨论】：

非常感谢。我想你可能误解了我所说的“沿 X/Y 轴作为 groupE 移动”的意思。我的意思是通过使用 CSS 选择器，我可以指定（即调整）我想要组（即表单）的位置定位。因此，由于表单具有“速率”类。我希望能够应用frm.rate { margin: 20px 5px 5px 20px; } 之类的样式并将表单中的所有组件一起移动。
尝试添加form.rate{margin: 39px 5px 5px 20px;} 它将把表单中的所有组件一起移动。