如何格式化我的CSS文本，以便結果在2列中？

Question

我想重新創建HTML和CSS以下文字：

到目前爲止，沒有CSS，我在HTML中寫道：

<p><b>noun</b></p> 
<p>1. an optical instrument, often attached to the eyepiece of a microscope, by which 
the image of an external object is projected on a sheet of paper or 
the like for tracing.</p> 

但我怎麼能劃分1和文本的其餘部分保持原來的形象嗎？

Answer 1

使用ordered list（HTML元素ol）

下例：

<p><b>noun</b></p> 
 
<ol> 
 
    <li>an optical instrument, often attached to the eyepiece of a microscope, by which 
 
the image of an external object is projected on a sheet of paper or 
 
the like for tracing. 
 
    </li> 
 
</ol>

編輯：

如果你不想改變你的標記，還有其他的選擇你可以建立。

例如使用table和psuedo元素和編號一counter：

body { 
 
    counter-reset: counter; 
 
} 
 
.list { 
 
    display: table; 
 
} 
 
.list:before { 
 
    display: table-cell; 
 
    counter-increment: counter; 
 
    content: counter(counter) '.'; 
 
    padding-right: 5px; 
 
}

<p><b>noun</b> 
 
</p> 
 
<p class="list">an optical instrument, often attached to the eyepiece of a microscope, by which the image of an external object is projected on a sheet of paper or the like for tracing.</p> 
 
<p class="list">an optical instrument, often attached to the eyepiece of a microscope, by which the image of an external object is projected on a sheet of paper or the like for tracing.</p>

Answer 2

正如@kukkuz已經說了，你可以使用一個ordered list。然後如果你想得到和你發佈的圖片完全相同的結果，你可以在你的CSS中更改列表的佈局，如下所示：

ol { 
    padding-left:1em; 
} 

li { 
    padding-left:1em; 
}