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

Question

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

1. Lorem ipsum dolor坐在amet，保密adipiscing精英...
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

更新的答案。 它也可以在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> 

Answer 3

使用display: inline-flex; 而不是display: table; 为您的课程.boxes 。

如果要将空格保留在方框下方，则可以在margin-bottom: 20px;添加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>