html - 单选按钮不会向左对齐

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>

这是 fiddle :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 标签。这不是一个好的做法。我们可以为每个单选按钮和文本设置标签。通过将其显示添加到 block 中，它们将对齐。

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>