如何以将数字保留在边框内的方式设置列表元素边框的样式？
例如，在此代码中 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>
另外，如何增加每个列表项的高度（增加边框和字母之间的距离）？我试着把padding: 20px 0 on .catalog-info但它弄乱了订单号和文本之间的对齐..
您可以使用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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
