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

Question

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

1. Lo​​rem ipsum dolor sit amet, consectetur adipiscing elit...
2. 框 1

请参阅我的 jsfiddle 以了解我遇到的问题。

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

这是我拥有的 HTML 和 CSS

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

.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 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

为您的班级使用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>

Answer 3

更新的答案。它也可以在 IE 上运行

使用 display:inline-table

演示：jsfiddle

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

.box {
  display: table-cell;
}

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

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

<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>