.p-layout {
display: flex;
flex-direction: column;
}
.p-content {
display: flex;
flex-direction: row;
justify-content: center;
align-content: space-between;
padding-top: 30px;
}
.p-content ul{
background-color: #f9f9f9;
}
.p-content ul li {
padding: 10px;
}
.p-content-col {
display: flex;
flex-direction: column;
height: 100%;
}
.p-content-label {
margin-left: 30px;
}
.p-content-btn-box {
display: flex;
flex-direction: row;
justify-content: center;
padding: 10px;
margin: 0 auto;
}
.btn-param {
width: 80px;
padding: 10px;
}
<div class="p-layout">
<div class="p-content">
<div class="p-content-col">
<div>
<label class="p-content-label" for="">Заголовок: </label>
</div>
<div>
<ul id="id_groups">
<li>
<label for="id_groups_0">
<input type="checkbox" name="groups" value="0" id="id_groups_0">
Элемент
</label>
</li>
<li>
<label for="id_groups_1">
<input type="checkbox" name="groups" value="1" id="id_groups_1">
Элемент
</label>
</li>
<li>
<label for="id_groups_2">
<input type="checkbox" name="groups" value="2" id="id_groups_2">
Элемент
</label>
</li>
<li>
<label for="id_groups_3">
<input type="checkbox" name="groups" value="3" id="id_groups_3">
Элемент
</label>
</li>
<li>
<label for="id_groups_4">
<input type="checkbox" name="groups" value="4" id="id_groups_4">
Элемент
</label>
</li>
<li>
<label for="id_groups_5">
<input type="checkbox" name="groups" value="5" id="id_groups_5">
Элемент
</label>
</li>
</ul>
</div>
<div class="p-content-btn-box">
<div class="btn-param">Отправить</div>
<div class="btn-param">Отправить</div>
</div>
</div>
<div class="p-content-col">
<label class="p-content-label" for="">Заголовок: </label>
<ul id="id_sources">
<li>
<label for="id_sources_0"><input type="checkbox" name="sources" value="0"
id="id_sources_0">
Элемент
</label>
</li>
<li>
<label for="id_sources_1"><input type="checkbox" name="sources" value="1"
id="id_sources_1">
Элемент
</label>
</li>
<li>
<label for="id_sources_2"><input type="checkbox" name="sources" value="2"
id="id_sources_2">
Элемент
</label>
</li>
</ul>
<div class="p-content-btn-box">
<div class="btn-param">Отправить</div>
<div class="btn-param">Отправить</div>
</div>
</div>
</div>
</div>
1 个回答