Выравнять Список (
Как можно выравнять input-ы, чтобы они были на одном уровне и не зависили от длинны текста label
.div-detail-general {
width: 50em;
margin: 10px;
border-left-width: 5px;
border-left-color: #7ac943;
border-left-style: solid;
}
.div-detail-general h3 {
margin: 0 0 0 8px;
}
.list-content-page-detail {
list-style: none;
}
.list-content-page-detail label {
font-size: 0.8em;
margin: 0 0 0 18px;
}
.list-content-page-detail li {}
.label-search-list {}
.input-list-detail {
border-color: #8d9ab1;
width: 32em;
height: 2em;
margin: 8px 2px;
}
<div class="div-detail-general">
<h3>Заголовок</h3>
<ul class="list-content-page-detail">
<li>
<label for="text1">Текст ок</label>
<input type="text" class="input-list-detail" name="text1" id="text1">
</li>
<li>
<label for="text2">Текст</label>
<input type="search" class="input-list-detail label-search-list" name="text2" id="text2">
</li>
<li>
<label for="text3">Текстик</label>
<input type="search" class="input-list-detail" name="text3" id="text3">
</li>
<li>
<label for="text4">Текст длинный</label>
<input type="datetime-local" class="input-list-detail" name="text4" id="text4">
</li>
</ul>
</div>
Ответы (1 шт):
Автор решения: RavenTheX
→ Ссылка
Можно обернуть label в div и добавить ему min-widthпо самому длинному тексту
.div-detail-general {
width: 50em;
margin: 10px;
border-left-width: 5px;
border-left-color: #7ac943;
border-left-style: solid;
}
.div-detail-general h3 {
margin: 0 0 0 8px;
}
.list-content-page-detail {
list-style: none;
}
.list-content-page-detail li {
display: flex;
align-items: center;
}
.list-content-page-detail li div {
min-width: 100px;
margin-right: 10px;
}
.list-content-page-detail div label {
font-size: 0.8em;
margin: 0 0 0 18px;
}
.input-list-detail {
border-color: #8d9ab1;
width: 32em;
height: 2em;
margin: 8px 2px;
}
<div class="div-detail-general">
<h3>Заголовок</h3>
<ul class="list-content-page-detail">
<li>
<div>
<label for="text1">Текст ок</label>
</div>
<input type="text" class="input-list-detail" name="text1" id="text1">
</li>
<li>
<div>
<label for="text2">Текст</label>
</div>
<input type="search" class="input-list-detail label-search-list" name="text2" id="text2">
</li>
<li>
<div>
<label for="text3">Текстик</label>
</div>
<input type="search" class="input-list-detail" name="text3" id="text3">
</li>
<li>
<div>
<label for="text4">Текст длинный</label>
</div>
<input type="datetime-local" class="input-list-detail" name="text4" id="text4">
</li>
</ul>
</div>