如何用HTML/CSS将按钮置于评分星星下方并实现底部对齐

Alright, let's fix those two layout issues you're facing with your Bootstrap form!

问题2：将“Post My Review”按钮移到评分星星下方 #

目前你的评分容器用了float: left，导致按钮会跟在它旁边同一行显示。这里有两种简单靠谱的修复方式：

方法1：清除浮动

在按钮前添加一个清除浮动的元素，或者直接给按钮加清除样式：

<div class="rating mt-3">
  <!-- 星星代码保持不变 -->
</div>
<div class="clearfix"></div> <!-- 清除浮动，让按钮自动换行 -->
<input type="submit" class="btn btn-primary mt-2" value="Post My Review">

或者在CSS里给按钮添加清除规则：

.btn-primary {
  clear: both;
  margin-top: 10px; /* 可选，增加按钮和星星的间距 */
}

方法2：用Bootstrap栅格重构布局（推荐）

更符合Bootstrap最佳实践的方式是用row和col来组织元素，彻底避免浮动带来的布局问题：

<div class="row mt-3">
  <div class="col-12">
    <div class="rating">
      <!-- 星星代码保持不变 -->
    </div>
  </div>
  <div class="col-12 mt-2">
    <input type="submit" class="btn btn-primary" value="Post My Review">
  </div>
</div>

这样按钮会自动换行到星星下方，布局也更规整易维护。

问题1：实现按钮的底部对齐 #

如果你的需求是让按钮和其他表单元素（输入框、文本域）在容器底部对齐，利用Bootstrap 4的flex布局类就能轻松实现：

给表单容器添加d-flex flex-column h-100类，然后给按钮加mt-auto，让它自动“挤”到容器底部：

<form action="" class="d-flex flex-column h-100" style="min-height: 400px;"> <!-- min-height用来模拟容器高度 -->
  <input type="text" class="form-control" placeholder="Your Name" required>
  <textarea placeholder="Enter Your Review Here..." cols="30" rows="5" class="form-control mt-3" required></textarea>
  <div class="rating mt-3">
    <!-- 星星代码保持不变 -->
  </div>
  <input type="submit" class="btn btn-primary mt-auto" value="Post My Review">
</form>

mt-auto会让按钮上方的margin自动填充容器剩余空间，从而把按钮固定在底部。

整合后的完整代码 #

这里把两个问题的解决方案结合起来，用Bootstrap栅格和flex布局优化了整体结构：

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<form action="" class="container py-4">
  <input type="text" class="form-control" placeholder="Your Name" required>
  <textarea placeholder="Enter Your Review Here..." cols="30" rows="5" class="form-control mt-3" required></textarea>
  
  <style>
    .rating { float: left; }
    .rating input { display: none; }
    .rating label { color: #ddd; float: right; }
    .rating label:before { margin: 5px; }
    .rating>input:checked~label, .rating:not(:checked)>label:hover, .rating:not(:checked)>label:hover~label { color: #FFD700; }
    .rating-st { font-size: 30px; padding: 5px; }
  </style>

  <div class="row mt-3">
    <div class="col-12">
      <div class="rating">
        <input id="star_a-5" name="rating_a" type="radio" value="5" />
        <label for="star_a-5" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
        <input id="star_a-4" name="rating_a" type="radio" value="4" />
        <label for="star_a-4" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
        <input id="star_a-3" name="rating_a" type="radio" value="3" />
        <label for="star_a-3" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
        <input id="star_a-2" name="rating_a" type="radio" value="2" />
        <label for="star_a-2" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
        <input id="star_a-1" name="rating_a" type="radio" value="1" required/>
        <label for="star_a-1" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
      </div>
    </div>
    <div class="col-12 mt-2">
      <!-- 若需要底部对齐，可在此div添加d-flex align-items-end，或在form上使用flex-column + mt-auto -->
      <input type="submit" class="btn btn-primary" value="Post My Review">
    </div>
  </div>
</form>

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