主页 / 问题 / 1209045
Accepted
Dev18
Asked:2021-11-24 18:40:55 +0000 UTC2021-11-24 18:40:55 +0000 UTC

对齐列表（<li><label><input> 相对于标签填充输入） css

  • 772

如何对齐输入以使它们处于同一级别并且不依赖于标签文本的长度

.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>

css

1 个回答

  1. Best Answer

    您可以将最长的文本换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>

    • 1

相关问题