将有序列表编号与第一行内容对齐

Question

我有一个可以包含任意数量元素的有序列表。每个元素的大小可以不同，但​​无论大小如何，我都希望有序列表的编号与内容的第一行对齐。所以我想要实现的是：

1. Lorem ipsum dolor sit amet，consectetur adipiscing elit ...
2. 方框1

请查看我的问题，了解我遇到的问题。

https://jsfiddle.net/txo5bsua/2/

这是我拥有的HTML和CSS

＆＃13;
＆＃13;
.boxes {
  display: table;
  width: 100%;
  height: 100%;
}

.box {
  display: table-cell;
}

.box1 {
  background: orange;
  width: 75%;
}

.box2 {
  background: yellow;
}
＆＃13;
<ol>
  <li>
    <div class="boxes">
      <div class="box box1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis condimentum massa. Quisque purus nisl, finibus id placerat id, ultricies non magna. Sed justo dui, tristique et metus at, fringilla viverra ipsum. Duis malesuada est eget lectus fermentum,
        vitae pretium eros tempor. Integer eu mi metus. Cras dui ipsum, iaculis ut libero dictum, dapibus consequat orci. Sed semper vitae lorem eu sollicitudin. Curabitur dapibus fringilla facilisis. Nullam facilisis ante in velit maximus gravida.
      </div>
      <div class="box box2">
        <input type="radio">Yes
        <input type="radio">No
      </div>
    </div>
  </li>
  <li>
    <div class="boxes">
      <div class="box box1">Box 1</div>
      <div class="box box2">Box 2</div>
    </div>
  </li>
</ol>
＆＃13;
＆＃13;
＆＃13;

你能帮我解决这个问题吗？

Answer 1

这对你有用吗？

.boxes {
    display:table;
    width: 100%;
    height: 100%;
    float: right;
}
li {
  clear: both;
}

.box {
    display: table-cell;
 }

 .box1 {
     background: orange;
     width:75%;
  }

  .box2 {
      background: yellow;
   }

<ol>
    <li>
        <div class="boxes">
            <div class="box box1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis condimentum massa. Quisque purus nisl, finibus id placerat id, ultricies non magna. Sed justo dui, tristique et metus at, fringilla viverra ipsum. Duis malesuada est eget lectus fermentum, vitae pretium eros tempor. Integer eu mi metus. Cras dui ipsum, iaculis ut libero dictum, dapibus consequat orci. Sed semper vitae lorem eu sollicitudin. Curabitur dapibus fringilla facilisis. Nullam facilisis ante in velit maximus gravida.
            </div>
            <div class="box box2">
               <input type="radio">Yes
               <input type="radio">No
            </div>
        </div>  
    </li>
    <li>
        <div class="boxes">
            <div class="box box1">Box 1</div>
            <div class="box box2">Box 2</div>
        </div>  
    </li>
</ol>

Answer 2

更新了答案。它也适用于IE

使用 display：inline-table

演示：jsfiddle

＆＃13;

＆＃13;

.boxes {
  display:inline-table;
  width: 100%;
  height: 100%;
}

.box {
  display: table-cell;
}

.box1 {
  background: orange;
  width:75%;
}

.box2 {
  background: yellow;
  width:25%;
}

＆＃13;

<ol>
<li>
<div class="boxes">
   <div class="box box1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis condimentum massa. Quisque purus nisl, finibus id placerat id, ultricies non magna. Sed justo dui, tristique et metus at, fringilla viverra ipsum. Duis malesuada est eget lectus fermentum, vitae pretium eros tempor. Integer eu mi metus. Cras dui ipsum, iaculis ut libero dictum, dapibus consequat orci. Sed semper vitae lorem eu sollicitudin. Curabitur dapibus fringilla facilisis. Nullam facilisis ante in velit maximus gravida.
 </div>
   <div class="box box2">
     <input type="radio">Yes
     <input type="radio">No
   </div>
</div>  
</li>
<li>
<div class="boxes">
   <div class="box box1">Box 1</div>
   <div class="box box2">Box 2</div>
</div>  
</li>
</ol>

＆＃13;

＆＃13;

＆＃13;

Answer 3

对您的班级display: inline-flex;使用display: table;而不是.boxes。

如果您想将空格保留在方框下方，可以添加margin-bottom: 20px;：

.boxes {
  display:inline-flex;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

.box {
  display: table-cell;
}

.box1 {
  background: orange;
  width:75%;
}

.box2 {
  background: yellow;
  width: 25%;
}

li {
  clear: both;
}

<ol>
<li>
<div class="boxes">
   <div class="box box1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis condimentum massa. Quisque purus nisl, finibus id placerat id, ultricies non magna. Sed justo dui, tristique et metus at, fringilla viverra ipsum. Duis malesuada est eget lectus fermentum, vitae pretium eros tempor. Integer eu mi metus. Cras dui ipsum, iaculis ut libero dictum, dapibus consequat orci. Sed semper vitae lorem eu sollicitudin. Curabitur dapibus fringilla facilisis. Nullam facilisis ante in velit maximus gravida.
 </div>
   <div class="box box2">
     <input type="radio">Yes
     <input type="radio">No
   </div>
</div>  
</li>
<li>
<div class="boxes">
   <div class="box box1">Box 1</div>
   <div class="box box2">Box 2</div>
</div>  
</li>
</ol>