Question

我有两个疑问需要解决。

我的订购清单的编号为1 2 3 4 5 6等，但无法使其与问题保持一致
，这超出了框框。 >
每个问题都有一个解决方案按钮，但我不知道如何将其放在问题的侧面。

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

 IconData cartIcon= Icons.add_shopping_cart;
 IconData cart2 = Icons.shopping_cart;
   
IconButton(
   
          icon:widget.rest.items_to_Order.isEmpty?Icon(cartIcon, color: Colors.white,):Icon(cart2 , 
           color: Colors.amber,),
          iconSize: 30,
          onPressed: () {
            Navigator.push(context, new MaterialPageRoute(builder: (context)=> new list_orders_page(widget.rest)));
          },
        ),

* {
    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);
}

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>

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

1 个答案: