Question

我正在尝试创建一个模态，除了我的单选按钮以外，其他所有功能都实现得很好。无论我尝试什么，我都无法理解如何像将表单中的其他元素一样将它们向左移动。我要做的就是将单选按钮向左移动，并使它们与其他元素（如普通单选按钮）对齐。

.feedback-background {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedback-content {
  width: 500px;
  height: 600px;
  background-color: white;
  border-radius: 4px;
  padding: 20px;
}

input {
  width: 50%;
  display: block;
  margin: 10px 0px;
}

input[type="radio"] {
  display: inline;
}

<div class="feedback-background">

  <div class="feedback-content">

    <img src="E:\IIT\Lectures\WEB\coursework1\Images\feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;">

    <form action="">

      Name:
      <input type="text" placeholder="Name"> E-Mail:
      <input type="text" placeholder="E-mail"> What do you think about us?<br>
      <textarea rows="6" cols="33" name="comment "></textarea>
      <br> How would you rate us ?
      <br>

      <label>
        <input type ="radio " name="rating " id="rating " value="Excellent ">Excellent
        <input type ="radio " name="rating " id="rating " value="Very Good ">Very Good
        <input type ="radio " name="rating " id="rating " value="Average ">Average
        <input type ="radio " name="rating " id="rating " value="Poor ">Poor
        <input type ="radio " name="rating " id="rating " value="Extreamly Poor ">Extreamly Poor
      </label>
      <br>
      <br>

      <a href="# " id="btn1 ">SUBMIT</a>

    </form>

  </div>

</div>

这是小提琴：https://jsfiddle.net/dcag0167/2/

Answer 1

有很多工作，代码中有一些错误。我将重点介绍单选按钮。 2个主要错误。

1-您正在使用以下命令将单选按钮的宽度设置为50％：

input {
    width: 50%;
    display: block;
    margin: 10px 0px;
}

解决方案以其自己的风格进行重置

input[type="radio"]{
    width: auto;
    display: inline;
}

2-您正在将所有文本和单选按钮设为一个label标签。这不是一个好习惯。我们可以在标签上设置每个单选按钮和文本。通过将其显示添加到块中，它们将对齐。

label {
    display: block;
}

希望这会有所帮助：>

.feedback-background{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feedback-content{
    width: 500px;
    height: 600px;
    background-color: white;
    border-radius: 4px;
    padding: 20px;
}

input {
    width: 50%;
    display: block;
    margin: 10px 0px;
}

label {
    display: block;
}

input[type="radio"]{
    width: auto;
    display: inline;
}

<div class="feedback-background">
    <div class="feedback-content">
        <img src="E:\IIT\Lectures\WEB\coursework1\Images\feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;">
        
        <form action="">
            Name:
            <input type="text" placeholder="Name">
            E-Mail:
            <input type="text" placeholder="E-mail">
            What do you think about us?<br>
            <textarea rows="6" cols="33" "name="comment"></textarea>
            <br>
            How would you rate us?
            <br>
            
            <label><input type ="radio" name="rating" id="rating" value="Excellent">Excellent</label>
            <label><input type ="radio" name="rating" id="rating" value="Very Good">Very Good</label>
            <label><input type ="radio" name="rating" id="rating" value="Average">Average</label>
            <label><input type ="radio" name="rating" id="rating" value="Poor">Poor</label>
            <label><input type ="radio" name="rating" id="rating" value="Extreamly Poor">Extremely Poor</label>
            <br>
            <br>
            
            <a href="#" id="btn1">SUBMIT</a>
        </form>
    </div>
</div>

Answer 2

首先，删除整个input CSS样式，并保留一个样式。

接下来，我将您的HTML更改为每个单选按钮都包含一个<label>。这样，您还可以单击<label>来单击单选按钮。 for=""是这里的把戏。

最后，用<div class="ratings">包围每组收视率，以便它们都可以使用共享样式属于自己的收视率组。

.feedback-background {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedback-content {
  width: 500px;
  height: 600px;
  background-color: white;
  border-radius: 4px;
  padding: 20px;
}


.ratings {
  margin: 10px 0px;
}

<div class="feedback-background">

  <div class="feedback-content">

    <img src="E:\IIT\Lectures\WEB\coursework1\Images\feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;" />

    <form action="">

      Name:
      <input type="text" placeholder="Name"> E-Mail:
      <input type="text" placeholder="E-mail"> What do you think about us?<br>
      <textarea rows="6" cols="33" name="comment"></textarea>
      <br> How would you rate us ?
      <br>

      <div class="ratings">
        <input type="radio" name="rating" id="ExcellentRating" value="Excellent">
        <label for="ExcellentRating">Excellent</label>
      </div>
      <div class="ratings">
        <input type="radio" name="rating" id="VeryGoodRating" value="Very Good">
        <label for="VerGoodRating">Very Good</label>
      </div>
      <div class="ratings">
        <input type="radio" name="rating" id="AverageRating" value="Average">
        <label for="AverageRating">Average</label>
      </div>
      <div class="ratings">
        <input type="radio" name="rating" id="PoorRating" value="Poor">
        <label for="PoorRating">Poor</label>
      </div>
      <div class="ratings">
        <input type="radio" name="rating" id="ExtremelyPoorRating" value="Extremely Poor">
        <label for="ExtremelyPoorRating">Extremely Poor</label>
      </div>
      <br>
      <br>

      <a href="#" id="btn1">SUBMIT</a>

    </form>

  </div>

</div>

单选按钮不会向左对齐

2 个答案: