1
votes

Grille CSS mal espacée

J'ai une grille avec trois éléments, et les deux derniers sont "espacés vers le haut" pour une raison quelconque.

<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-name {
  grid-area: name;
}

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

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

Les "Modifier" et "Supprimer" sont espacés vers le haut au lieu d'être sur la même ligne que la "1 Flèche".

html css css-grid

1 commentaires

C'est parce que vous avez un paragraphe avec une marge par défaut. Retirez-le et ils s'alignent

3 Réponses :

0
votes

vous pouvez utiliser align-items: center;

<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;
}

si vous ne l'utilisez pas (comme ce que vous aviez) avec la bordure orange, cela ressemble à ceci:

<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";
  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;
}

0 commentaires

1
votes

Comme @ j08691 l'a déjà dit, c'est à cause de votre

-element a> qui est livré avec un défaut marge .

Vous pouvez facilement le «réparer» en ajoutant margin: 0; à votre classe .item-name comme je l'ai fait ci-dessous. Ou vous pouvez également mettre vos liens dans un paragraphe. Comme
Modifier
<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-name {
  grid-area: name;
  margin: 0;
}

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

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

0 commentaires

0
votes

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

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

Essayez la balise d'étiquette

0 commentaires