CSS сетка неправильно расположена - html


0

У меня есть сетка из трех элементов, и последние два почему-то "разнесены вверх".

.item {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-areas: "name edit remove"
}

.item-name {
  grid-area: name;
}

.item-edit {
  grid-area: edit;
}

.item-remove {
  grid-area: remove;
}
<div class="item">
  <p class="item-name">1 Arrow</p>
  <a class="item-edit" href="#">Edit</a>
  <a class="item-remove" href="#">Remove</a>
</div>

"Редактировать" и "Удалить" располагаются вверх, а не на одной строке с "1 стрелкой".

  •  56
  •  3
  • 11 май 2020 2020-05-11 10:17:03

3 ответа

0

.item {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-areas: "name edit remove"
}

.item-name {
  grid-area: name;
}

.item-edit {
  grid-area: edit;
}

.item-remove {
  grid-area: remove;
}
<div class="item">
  <label class="item-name">1 Arrow</label>
  <a class="item-edit" href="#">Edit</a>
  <a class="item-remove" href="#">Remove</a>
</div>

Попробуйте метку тега

0

  Как @j08691 уже сказал это из-за вашей <p> -element по умолчанию запас.


Вы можете легко "исправить" это, добавив margin: 0; в свой класс .item-name, или вы также можете поместить свои ссылки в абзац. Нравится <p class="item-edit"><a href="#">Edit</a></p>

.item {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-areas: "name edit remove"
}

.item-name {
  grid-area: name;
  margin: 0;
}

.item-edit {
  grid-area: edit;
}

.item-remove {
  grid-area: remove;
}
<div class="item">
  <p class="item-name">1 Arrow</p>
  <a class="item-edit" href="#">Edit</a>
  <a class="item-remove" href="#">Remove</a>
</div>

  • 11 май 2020 2020-05-11 10:17:04
0

Вы можете использовать align-items: center;

.item {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-areas: "name edit remove";
  align-items: center;
}

.item * {border: solid 1px orange; } /* added only for demonstration purpose*/

.item-name {
  grid-area: name;
}

.item-edit {
  grid-area: edit;
}

.item-remove {
  grid-area: remove;
}
<div class="item">
  <p class="item-name">1 Arrow</p>
  <a class="item-edit" href="#">Edit</a>
  <a class="item-remove" href="#">Remove</a>
</div>

если вы не используете его (например, то, что было у вас) с оранжевой рамкой, это выглядит так:

.item {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-areas: "name edit remove";
}

.item * {border: solid 1px orange; } /* added only for demonstration purpose*/

.item-name {
  grid-area: name;
}

.item-edit {
  grid-area: edit;
}

.item-remove {
  grid-area: remove;
}
<div class="item">
  <p class="item-name">1 Arrow</p>
  <a class="item-edit" href="#">Edit</a>
  <a class="item-remove" href="#">Remove</a>
</div>

  • 11 май 2020 2020-05-11 10:17:04