Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

以下是一位经过编辑的工作小提琴：http://jsfiddle.net/ash06229/u7sq8rL7/26/

ol {
  width: 100%;
  float: left;
  padding: 0;
}
ul {
  padding: 0 20px 0;
}
.o {
  list-style-type: lower-alpha;
  float: left;
  width: 50%;
}

.m {
  list-style-type: lower-roman;
  float: left;
  width: 50%;
}

Answer 3

从你的代码中，我猜想下面是你需要的东西？

.o {
      list-style-type: lower-alpha;
      float: left;
      width: 40%
    }

    .m {
      list-style-type: lower-roman;
      float: left;
      width: 50%
    }

Answer 4

.o {
  list-style-type: lower-alpha;
     float: left;
    width: 25%;
 }

.m {
  list-style-type: lower-roman;
  float: right;
 }

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

只需添加display: inline-block o和m类：

<style>
 .o {
    display: inline-block;
    list-style-type: lower-alpha;
  }

.m {
  display: inline-block;
  list-style-type: lower-roman;
}
</style>

Answer 6

＆＃13;

ol {
  display: flex;
}

.o {
  list-style-type: lower-alpha;
}

.m {
  list-style-type: lower-roman;
}

＆＃13;

<ol>
  <ul class="o">
    <li>hello you have are you doing today, happy to meet you</li>
    <li>hello you have are you doing today, happy to meet you</li>
  </ul>
  <ul class="m">
    <li>hello you have are you doing today, happy to meet you</li>
    <li>hello you have are you doing today, happy to meet you</li>
  </ul>
</ol>
<p>Some other content is here....</p>

＆＃13;

在css中对齐列表项

6 个答案: