Как можно сделать такой строчно-блочный список, как на фото:
2 ответа
Это можно осуществить с помощью 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>
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>
Поскольку народ испугался таблиц из ужасных баек фронэндеров я заменил её на div. Хотя если подумать таблицы это основополагающий элемент в электронных документах.
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>
-
-
@УткаУчитсяУму а флексбох это экспериментальная технология. мне кажется два дива в элемент списка сувать не правильно. ну css огромный ко всему ) – perfect 6 янв '17 в 16:37
-
-
flexbox во всех современных браузерах поддерживается нормально, самый хороший на текущий момент ответ дала @Elena в комментариях. А Вы мешаете структуру с внешним видом. Ну серьезно, этот ответ был морально устаревшим лет пять назад. Работать то работает, но верстай вы так в нормальном проекте - никто с вами разговаривать не будет. – Утка Учится Укрываться 6 янв '17 в 16:38
-
@УткаУчитсяУму, ответ то хороший, но
inline-block
иногда выкаблучивается, когда меняешь размеры – Yuri 6 янв '17 в 16:40
display: inline-block;
– HamSter 6 янв '17 в 16:15