分享
三行代码  ›  专栏  ›  技术社区  ›  GoAman

(ordered list-html)包括边框内的订单号

  •  0
  • GoAman  · 技术社区  · 5 天前

    如何设置列表元素边框的样式,使数字保持在边框内?

    * {
      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 .catalog-info 但它扰乱了订单号和文本之间的对齐方式。。

    1 回复  |  直到 5 天前
        1
  •  0
  •   vicbyte    5 天前

    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>