CODEWITHSUNDEEP
htmlcss
GoAman
GoAman

Reputation: 23

(ordered list - html) Including order number inside the border

How can i style a list element's borders in ways of keeping the number inside the border?

For example in this code HTML and 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>

Also, how can i increase the height of each list item (Increasing the distance between border and letters)? I tried to put padding: 20px 0 on .catalog-info but it messes up the alignment between order number and the text..

Upvotes: 2

Views: 504

Answers (1)

vicbyte
vicbyte

Reputation: 3790

You can use list-style-position: inside; property.

* {
  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>

Upvotes: 3

Related Questions