How can you make such a string-block list, as in the photo: enter image description here

  • 3
    display: inline-block; - HamSter
  • @Elena, I tried, it does not work, the text of the list comes under each other and the markers disappear - Nikita Pimenov
  • one
    This question should be closed, because the question-picture is useless for the knowledge base. - aleksandr barakin

2 answers 2

This can be done using flexbox :

 body {font-family: arial;} ul { display: flex; margin: 0; padding: 0; list-style: none; width: 500px; flex-wrap: wrap; } ul > li { display: block; width: 250px; height: 100px; } ul > li > .header { display: flex; text-transform: uppercase; align-items: center; font-size: 20px; margin-bottom: 20px; color: #073361; } ul > li > .header:before { content: ''; display: inline-block; width:12px; height: 12px; margin-right: 20px; background-color: #41b7c3; } ul > li > .text { display:block; padding-left: 34px; color: #22578f; } /* #41b7c3 */ 
 <ul> <li><div class="header">Header</div><div class="text">Text</div></li> <li><div class="header">Header</div><div class="text">Text</div></li> <li><div class="header">Header</div><div class="text">Text</div></li> <li><div class="header">Header</div><div class="text">Text</div></li> <li><div class="header">Header</div><div class="text">Text</div></li> </ul>

  • thank you so much - Nikita Pimenov

 ul { list-style: square; font-size: 20px; } li { color: #42B6C3; } .hd { color: #3A5775; text-transform: uppercase; } .cn { color: #7B90AB } 
 <table> <tr><td> <ul> <li><span class="hd">head</span></li> <span class="cn">text text text text text</span> </ul> <ul> <li><span class="hd">head</span></li> <span class="cn">text text text text text</span> </ul> <ul> <li><span class="hd">head</span></li> <span class="cn">text text text text text</span> <ul> </td><td> <ul> <li><span class="hd">head</span></li> <span class="cn">text text text text text</span> </ul> <ul> <li><span class="hd">head</span></li> <span class="cn">text text text text text</span> </ul> <ul> <li><span class="hd">head</span></li> <span class="cn">text text text text text</span> <ul> </td></tr> </table>

Since the people were afraid of the tables from the terrible fronderer tales, I replaced it with a div. Although if you think the table is a fundamental element in electronic documents.

 ul { list-style: square; font-size: 20px; } li { color: #42B6C3; } .hd { color: #3A5775; text-transform: uppercase; } .cn { color: #7B90AB } .ux { float: right; width: 50%; } 
 <div class="ux"> <ul> <li><span class="hd">head</span></li> <span class="cn">text text text text text</span> </ul> <ul> <li><span class="hd">head</span></li> <span class="cn">text text text text text</span> </ul> <ul> <li><span class="hd">head</span></li> <span class="cn">text text text text text</span> </ul> </div> <div class="ux"> <ul> <li><span class="hd">head</span></li> <span class="cn">text text text text text</span> </ul> <ul> <li><span class="hd">head</span></li> <span class="cn">text text text text text</span> </ul> <ul> <li><span class="hd">head</span></li> <span class="cn">text text text text text</span> </ul> </div>

  • Of course, the example is a worker, but he is kind of strange) - Yuri
  • @ Duck LEARNS and FlexBox is an experimental technology. It seems to me two divas in the list item Suva is not correct. css is huge for everything) - perfect
  • @perfect why not right? It takes less space in CSS - Yuri
  • flexbox in all modern browsers is maintained normally, the best answer to date is given by @Elena in the comments. And you interfere with the structure with the appearance. Well, seriously, this answer was obsolete five years ago. It works, but if you do it in a normal project, no one will talk to you. - Duck Learns to Take Cover
  • @ Duck Teaches Mind, the answer is good, but the inline-block sometimes fails when you change dimensions - Yuri