how to make the list items stretch across the entire width of the parent block. Like this: enter the description of the link here. It seems I saw something like this on an htmlbook, but it loads me

.parner_img { width: 220px; height: 220px; border-radius: 50%; display: table-cell; } .parner_conten { min-height: 150px; margin-left: 30px; display: table-cell; vertical-align: top; padding-left: 20px; } .parner_conten h2 { font-size: 30px; margin: 0; } .parner_conten p { font-size: 18px; line-height: 27px; } .parner_conten ul { margin: 0; padding: 0; list-style-type: none; } .parner_conten li { display: inline-block; background-color: #000; color: #fff; padding: 18px 11px; } 
 <div class="parner_item"> <div class="parner_img"><img src="http://s012.radikal.ru/i320/1609/a1/397ef046ddeb.jpg" alt=""></div> <div class="parner_conten"> <h2>Елена Анатолиевна</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <ul> <li>г. Харьков ( Украина )</li> <li>Формат - PREMIUM</li> <li>(40 - 200 кв.м.)</li> </ul> </div> </div>

    1 answer 1

    For example flex:

     .parner_img { width: 220px; height: 220px; border-radius: 50%; display: table-cell; } .parner_conten { min-height: 150px; margin-left: 30px; display: table-cell; vertical-align: top; padding-left: 20px; } .parner_conten h2 { font-size: 30px; margin: 0; } .parner_conten p { font-size: 18px; line-height: 27px; } .parner_conten ul { margin: 0; padding: 0; list-style-type: none; display: flex; flex-flow: row nowrap; align-items: center; align-content: space-between; justify-content: space-between; } .parner_conten li { display: inline-block; background-color: #000; color: #fff; padding: 18px 11px; } 
     <div class="parner_item"> <div class="parner_img"><img src="http://s012.radikal.ru/i320/1609/a1/397ef046ddeb.jpg" alt=""></div> <div class="parner_conten"> <h2>Елена Анатолиевна</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <ul> <li>г. Харьков ( Украина )</li> <li>Формат - PREMIUM</li> <li>(40 - 200 кв.м.)</li> </ul> </div> </div>