（有序列表 - html）包括邊框內的訂單號

Question

如何以將數字保持在邊框內的方式設置列表元素的邊框樣式？

例如在此代碼 HTML 和 CSS 中：

 * { box-sizing: border-box; padding: 0; margin: 0; text-align: center; } h1 { margin: 50px; } #results-list { margin: auto; width: 500px; margin-top: 150px; }.catalog-info { width: 400px; margin: 20px 0; position: relative; font-size: 18px; border: 2px solid transparent; transition: 0.25s; }.catalog-info:hover { background-color: lightblue; border: 2px solid red; border-radius: 20px; }.catalog-info-el { display: inline-block; }.catalog-name { position: absolute; left: 0; }.catalog-pieces { position: absolute; right: 0; }

 <div id="results-list"> <h1>Your results</h1> <ol> <li class="catalog-info"> <div class="catalog-info-el catalog-name">First Catalog</div> <div class="catalog-info-el catalog-pieces">(3000 Pieces)</div> </li> <li class="catalog-info"> <div class="catalog-info-el catalog-name">Second Catalog</div> <div class="catalog-info-el catalog-pieces">(2000 Pieces)</div> </li> <li class="catalog-info"> <div class="catalog-info-el catalog-name">Third Catalog</div> <div class="catalog-info-el catalog-pieces">(900 Pieces)</div> </li> </ol> </div>

另外，如何增加每個列表項的高度（增加邊框和字母之間的距離）？ 我試圖在.catalog-info上添加padding: 20px 0但它弄亂了訂單號和文本之間的 alignment ..

Answer 1

您可以使用list-style-position: inside; 財產。

 * { box-sizing: border-box; padding: 0; margin: 0; text-align: left; } h1 { margin: 50px; } #results-list { margin: auto; width: 500px; margin-top: 150px; }.catalog-info { width: 400px; margin: 20px 0; position: relative; font-size: 18px; border: 2px solid transparent; transition: 0.25s; }.catalog-info:hover { background-color: lightblue; border: 2px solid red; border-radius: 20px; }.catalog-info-el { display: inline-block; }.catalog-name { text-align: left; }.catalog-pieces { float: right; } #results-list ol li { list-style-position: inside; }

 <div id="results-list"> <h1>Your results</h1> <ol> <li class="catalog-info"> <div class="catalog-info-el catalog-name">First Catalog</div> <div class="catalog-info-el catalog-pieces">(3000 Pieces)</div> </li> <li class="catalog-info"> <div class="catalog-info-el catalog-name">Second Catalog</div> <div class="catalog-info-el catalog-pieces">(2000 Pieces)</div> </li> <li class="catalog-info"> <div class="catalog-info-el catalog-name">Third Catalog</div> <div class="catalog-info-el catalog-pieces">(900 Pieces)</div> </li> </ol> </div>