БЛОГ НА HUSL


CSS, HTML. Нужно сделать линию на всю ширину контейнера

Автор вопроса: artist

Мне нужно сделать список у которого после каждой строки должна быть линия. Я верстаю по макету и нужно, чтобы список был сделан через flexbox, я делаю flex-direction: column для всех 6 столбцов. И вот тут у меня возникает дилема, потому что когда я делаю это при помощи :after, тогда линия появляется только под li. Пробовал другие методы, но при помощи :after кажется лучше всего будет. Помогите сделать эти линии на всю ширину контейнера main__list.

.main__list {
  display: flex;
  flex-direction: column;
  align-items: start;
  flex: 1;
  margin-left: 32px;
}

.main__link:first-child {
  color: #B5B7C0;
}

.main__link {
  margin-bottom: 24px;
}

.main__link::after {
  content: "";
  display: block;
  width: auto;
  height: 1px;
  background-color: #dddddd;
  /* Сірий колір лінії */
  margin-top: 22px;
}

.main__link:first-child {
  color: #B5B7C0;
}

.main__title__name {
  display: flex;
  justify-content: space-between;
}

.main__link__active {
  padding: 4px 18px;
  border: 1px solid #008767;
  border-radius: 4px;
  color: #008767;
  background-color: #16C09861;
  margin-bottom: 38px;
}

.main__link__inactive {
  padding: 4px 12px;
  border: 1px solid #DF0404;
  border-radius: 4px;
  color: #DF0404;
  background-color: #FFC5C5;
  margin-bottom: 30px;
}

.main__link__active::after,
.main__link__inactive::after {
  height: 0px;
}
<div class="main__title__name">
  <ul class="main__list">
    <li class="main__link">Customer Name</li>
    <li class="main__link">Jane Cooper</li>
    <li class="main__link">Floyd Miles</li>
    <li class="main__link">Ronald Richards</li>
    <li class="main__link">Marvin McKinney</li>
    <li class="main__link">Jerome Bell</li>
    <li class="main__link">Kathryn Murphy</li>
    <li class="main__link">Jacob Jones</li>
    <li class="main__link">Kristin Watson</li>
  </ul>

  <ul class="main__list">
    <li class="main__link">Company</li>
    <li class="main__link">Microsoft</li>
    <li class="main__link">Yahoo</li>
    <li class="main__link">Adobe</li>
    <li class="main__link">Tesla</li>
    <li class="main__link">Google</li>
    <li class="main__link">Microsoft</li>
    <li class="main__link">Yahoo</li>
    <li class="main__link">Facebook</li>
  </ul>

  <ul class="main__list">
    <li class="main__link">Phone Number</li>
    <li class="main__link">(225) 555-0118</li>
    <li class="main__link">(205) 555-0100</li>
    <li class="main__link">(302) 555-0107</li>
    <li class="main__link">(252) 555-0126</li>
    <li class="main__link">(629) 555-0129</li>
    <li class="main__link">(406) 555-0120</li>
    <li class="main__link">(208) 555-0112</li>
    <li class="main__link">(704) 555-0127</li>
  </ul>

  <ul class="main__list">
    <li class="main__link">Email</li>
    <li class="main__link">[email protected]</li>
    <li class="main__link">[email protected]</li>
    <li class="main__link">[email protected]</li>
    <li class="main__link">[email protected]</li>
    <li class="main__link">[email protected]</li>
    <li class="main__link">[email protected]</li>
    <li class="main__link">[email protected]</li>
    <li class="main__link">[email protected]</li>
  </ul>

  <ul class="main__list">
    <li class="main__link">Country</li>
    <li class="main__link">United States</li>
    <li class="main__link">Kiribati</li>
    <li class="main__link">Israel</li>
    <li class="main__link">Iran</li>
    <li class="main__link">Réunion</li>
    <li class="main__link">Curaçao</li>
    <li class="main__link">Brazil</li>
    <li class="main__link">Åland Islands</li>
  </ul>
  <ul class="main__list">
    <li class="main__link">Status</li>
    <li class="main__link__active">Active</li>
    <li class="main__link__inactive">Inactive</li>
    <li class="main__link__inactive">Inactive</li>
    <li class="main__link__active">Active</li>
    <li class="main__link__active">Active</li>
    <li class="main__link__active">Active</li>
    <li class="main__link__active">Active</li>
    <li class="main__link__inactive">Inactive</li>
  </ul>
</div>


Источник

Ответы (1 шт):

Автор решения: Maneken

Один из вариантов это установить ширину li 100%, чтобы она растянулась на весь контейнер

.main__list {
  display: flex;
  flex-direction: column;
  align-items: start;
  flex: 1;
  margin-left: 32px;
}

.main__link:first-child {
  color: #B5B7C0;
}

.main__link {
  margin-bottom: 24px;
  width: 100%;
  /* вот тут */
}

.main__link::after {
  content: "";
  display: block;
  width: auto;
  height: 1px;
  background-color: #dddddd;
  /* Сірий колір лінії */
  margin-top: 22px;
}

.main__link:first-child {
  color: #B5B7C0;
}

.main__title__name {
  display: flex;
  justify-content: space-between;
}

.main__link__active {
  padding: 4px 18px;
  border: 1px solid #008767;
  border-radius: 4px;
  color: #008767;
  background-color: #16C09861;
  margin-bottom: 38px;
}

.main__link__inactive {
  padding: 4px 12px;
  border: 1px solid #DF0404;
  border-radius: 4px;
  color: #DF0404;
  background-color: #FFC5C5;
  margin-bottom: 30px;
}

.main__link__active::after,
.main__link__inactive::after {
  height: 0px;
}
<div class="main__title__name">
  <ul class="main__list">
    <li class="main__link">Customer Name</li>
    <li class="main__link">Jane Cooper</li>
    <li class="main__link">Floyd Miles</li>
    <li class="main__link">Ronald Richards</li>
    <li class="main__link">Marvin McKinney</li>
    <li class="main__link">Jerome Bell</li>
    <li class="main__link">Kathryn Murphy</li>
    <li class="main__link">Jacob Jones</li>
    <li class="main__link">Kristin Watson</li>
  </ul>

  <ul class="main__list">
    <li class="main__link">Company</li>
    <li class="main__link">Microsoft</li>
    <li class="main__link">Yahoo</li>
    <li class="main__link">Adobe</li>
    <li class="main__link">Tesla</li>
    <li class="main__link">Google</li>
    <li class="main__link">Microsoft</li>
    <li class="main__link">Yahoo</li>
    <li class="main__link">Facebook</li>
  </ul>

  <ul class="main__list">
    <li class="main__link">Phone Number</li>
    <li class="main__link">(225) 555-0118</li>
    <li class="main__link">(205) 555-0100</li>
    <li class="main__link">(302) 555-0107</li>
    <li class="main__link">(252) 555-0126</li>
    <li class="main__link">(629) 555-0129</li>
    <li class="main__link">(406) 555-0120</li>
    <li class="main__link">(208) 555-0112</li>
    <li class="main__link">(704) 555-0127</li>
  </ul>

  <ul class="main__list">
    <li class="main__link">Email</li>
    <li class="main__link">[email protected]</li>
    <li class="main__link">[email protected]</li>
    <li class="main__link">[email protected]</li>
    <li class="main__link">[email protected]</li>
    <li class="main__link">[email protected]</li>
    <li class="main__link">[email protected]</li>
    <li class="main__link">[email protected]</li>
    <li class="main__link">[email protected]</li>
  </ul>

  <ul class="main__list">
    <li class="main__link">Country</li>
    <li class="main__link">United States</li>
    <li class="main__link">Kiribati</li>
    <li class="main__link">Israel</li>
    <li class="main__link">Iran</li>
    <li class="main__link">Réunion</li>
    <li class="main__link">Curaçao</li>
    <li class="main__link">Brazil</li>
    <li class="main__link">Åland Islands</li>
  </ul>
  <ul class="main__list">
    <li class="main__link">Status</li>
    <li class="main__link__active">Active</li>
    <li class="main__link__inactive">Inactive</li>
    <li class="main__link__inactive">Inactive</li>
    <li class="main__link__active">Active</li>
    <li class="main__link__active">Active</li>
    <li class="main__link__active">Active</li>
    <li class="main__link__active">Active</li>
    <li class="main__link__inactive">Inactive</li>
  </ul>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.