html - 在 css 中对齐列表项

Question

我在 CSS 中对齐元素时遇到问题，我希望有两个并排的无序列表，每个 alpha 元素都应该与其对应的 roman 元素对齐，无论 alpha 或 roman 元素的大小如何。这是我的代码:http://jsfiddle.net/u7sq8rL7/17/

.o {
  list-style-type: lower-alpha;
}

.m {
  list-style-type: lower-roman;
}

<ol>
  <ul class="o">
    <li>hello you have are you doing today, happy to meet you</li>
    <li>foo</li>
    <li>alpha</li>
    <li>small</li>
    <li>friend</li>
  </ul>
  <ul class="m">
    <li>bar</li>
    <li>enemy</li>
    <li>tall</li>
    <li>beta</li>
    <li>I'm fine thank you hope you are fine too.</li>
  </ul>
</ol>

Answer 1

像那样？

http://jsfiddle.net/LLyLutc2/

<ol>
  <ul class="o">
    <li>hello you have are you doing today, happy to meet you</li>
    <li>foo</li>
    <li>alpha</li>
    <li>small</li>
    <li>friend</li>
  </ul>
  <ul class="m">
    <li>bar</li>
    <li>enemy</li>
    <li>tall</li>
    <li>beta</li>
    <li>I'm fine thank you hope you are fine too.</li>
  </ul>
</ol>
<p>Some other content is here....</p>

.o {
  list-style-type: lower-alpha;
}

.m {
  list-style-type: lower-roman;
}

ul, p  {
    float: left;
    margin-left: 30px;
}