有序列表编号未与列表对齐

Question

我有两个疑问要解决。

1. 我的有序列表编号为 1 2 3 4 5 6 等，但无法将其与问题对齐

2. 这是开箱即用的。

3. 我对每个问题都有一个解决方案按钮，但我不知道如何将它放在问题的一侧。

这里我附上了代码和预期的输出。如果可能，请完成代码并发布。

* {
    margin: 0;
    padding: 0;

}

body {
    font-family: sans-serif;
    font-size: 15px;
    height: 100%;
    width: 100%;
    background-color: antiquewhite;
}

input[type="radio"] {    
    margin-right: 10px;
}


p {
    line-height: 30px;
    padding: 30px;    
}

.play{
    position: absolute;
    top: 150px;
    left: 300px;
    padding: 10px;
    border-radius: 10px;
    font-family: sans-serif;
    background-color: darkgreen;
    color: #fff;
    
}

form[name=quiz] {
    
    margin-left: 10%;
    margin-right: 10%;
}

ol{
    padding: 10px;
    list-style-position: inside;
    
}



ol li{
    background-color: #fff;
    border-radius: 15px;
    margin: 10px;
    box-shadow: 0px 1.5px 2px 0px rgb(91, 91, 91);
}

<form name="quiz" id="quiz">
        <ol>
            <li>
                <div class="q1">
                    <p><strong>The value of \(\frac{1}{{{{\log }_4}120}} + \frac{1}{{{{\log }_5}120}} + \frac{1}{{{{\log }_6}120}}\) is</strong><br><br>
                        <input type="radio" name="question1" value="0">A.0<br>
                        <input type="radio" name="question1" value="1">B.1<br>
                        <input type="radio" name="question1" value="24">C.24<br>
                        <input type="radio" name="question1" value="120">D.120<br>
                    </p>
                </div>
                <div>
                    <button class="play">Play Solution</button>
                </div>
            </li>
            

            <li>
                <div>
                    <p><strong>For a 3x3 matrix A, |A| = 4 and adj A = \(\left( {\begin{array}{*{20}{c}}1&p&3\\1&3&3\\2&4&4\end{array}} \right)\), then the value of p is</strong><br><br>
                        <input type="radio" name="question2" value="4">A.4<br>
                        <input type="radio" name="question2" value="11">B.11<br>
                        <input type="radio" name="question2" value="5">C.5<br>
                        <input type="radio" name="question2" value="0">D.0<br>
                    </p>
                </div>
            </li>

Answer 1

您的问题与您的有序列表的数量不一致，因为您使用的是<p> 元素，默认情况下设置为display: block;。删除 <p> 元素将解决问题。

您可以使用<table> 来组织您的答案和解决方案按钮。

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  font-size: 15px;
  height: 100%;
  width: 100%;
  background-color: antiquewhite;
}

form[name=quiz] { 
  margin-left: 10%;
  margin-right: 10%;
}

ol {
  padding: 10px;
  list-style-position: inside;
}

ol li {
  background-color: #fff;
  border-radius: 15px;
  margin: 10px;
  padding: 30px;
  box-shadow: 0px 1.5px 2px 0px rgb(91, 91, 91);
}

li table { 
  width: 100%;
} 

li table td { 
  vertical-align: top;
  padding-top: 20px;
} 

li table td:first-child { 
  width: 70%;
}

td p {
  padding-bottom: 10px;
}

td button {
  width: 100%;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 10px;
  background-color: darkgreen;
  color: #fff;
}

<form name="quiz" id="quiz">
  <ol>
    <li class="q1">
      <strong>The value of \(\frac{1}{{{{\log }_4}120}} + \frac{1}{{{{\log }_5}120}} + \frac{1}{{{{\log }_6}120}}\) is</strong>
      <table>
        <tr>
          <td>
            <p>
              <input type="radio" name="question1" id="question1" value="0">
              <label for="question1">A. 0</label>
            </p>
            <p>
              <input type="radio" name="question1" id="question2" value="1">
              <label for="question2">B. 1</label>
            </p>
            <p>
              <input type="radio" name="question1" id="question3" value="24">
              <label for="question3">C. 24</label>
            </p>
            <p>
              <input type="radio" name="question1" id="question4" value="120">
              <label for="question4">D. 120</label>
            </p>
          </td>
          <td>
            <button class="play">Play Solution</button>
            <button class="play">Text Solution</button>
          </td>
        </tr>
      </table>
    </li> 
  </ol>
</form>