Help make a margin inside the block.

There is a div and 5 li elements (in one line) of which the two extreme ones must be placed below, so that the middle element remains in place.

    3 answers 3

    If the flex option is suitable, then:

     ul { list-style-type: none; margin: 0; padding: 0; display: flex; align-items: flex-end; } li { padding: 10px; background-color: gray; transform: translateY(100%) } li:nth-child(3) { transform: translateY(0); align-self: flex-start; }

    https://codepen.io/anon/pen/BYNGKW

    • Hmm ... So, it turns out that the question was meant ... However, flex is not necessary here. - Qwertiy ♦
    • Yes, well, then you need to mess around with the margins - Yuri Kopot

     ul, li { margin: 0; padding: 0; list-style-type: none; } ul { display: flex; flex-wrap: wrap; justify-content: space-between; } li { width: 33.333333%; height: 3em; background: linear-gradient(-10deg, blue, red); } 
     <ul><li><li><li><li><li></ul> 

       ul, li { margin: 0; padding: 0; list-style-type: none; } ul { overflow: hidden; outline: 4px dotted green; } li { width: 33.333333%; height: 3em; float: left; background: linear-gradient(-10deg, blue, red); } li:last-child { float: right; } 
       <ul><li><li><li><li><li></ul>