在css中對齊列表項目

我在CSS中對齊項目時遇到問題，我希望並排放置兩個無序列表，每個Alpha項目都應該與其對應的羅馬項目對齊，無論是alpha還是roman項目。下面是我的代碼有：http://jsfiddle.net/u7sq8rL7/17/在css中對齊列表項目

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

來源

2017-06-22 franckstifler

可以ÿ ou顯示圖像如何對齊此HTML？ –

這聽起來像是一張桌子，可能是正確的選擇，如果兩個列表上的項目之間存在直接關係... – CBroe

@CBroe非常有趣，但我對如何對錶格中的元素進行編號感興趣。 – franckstifler

這樣呢？

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

來源

2017-06-22 10:14:56 RacoonOnMoon

當列表項太長時，我希望使用'white-space：pre-wrap'，但是您的解決方案似乎不適用於 – franckstifler

這是給你的編輯工作小提琴：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%; 
}

來源

2017-06-22 10:15:07 Shubham

好吧，剛剛看到了您的解決方案，但如果使用'white- space：pre-wrap;'在列表項上，它們不會相應地對齊，這是我希望解決的最大問題 – franckstifler

您能否通過輸出截圖分享您的確切問題？ – Shubham

剛剛在問題中添加了一張圖片來展示我的期望。 – franckstifler

從你的代碼，我想下面是什麼東西你需要什麼？

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

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

來源

2017-06-22 10:17:58 Archana

http://jsfiddle.net/audk70ce/3/ – franckstifler

爲您做這項工作？在上面的代碼中，你可以添加ol {overflow：hidden} – Archana

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

來源

2017-06-22 10:18:05

項目「a」與項目'i'，'ii'和'iii'匹配，這不是我所期望的 – franckstifler

你是什麼意思，這就是爲什麼我要求形象你想要的東西。 –

剛剛在問題中添加了圖像。 – franckstifler

只需添加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>

來源

2017-06-22 10:24:34

ol { 
 
    display: flex; 
 
} 
 

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

來源

2017-06-22 10:24:46 LKG

項目a似乎與項目i和項目ii有關。你能讓它成爲一對一的比賽嗎？ – franckstifler

我不明白你的意思嗎？ – LKG

如果你看着「見到你」，它就像是對應於「敵人」。如果項目越來越大，雙方的編號就會很奇怪。 – franckstifler

在css中對齊列表項目

回答

相關問題