web-dev-qa-db-fra.com

Aligner à gauche et à droite dans le titre du tapis

En utilisant le code suivant dans Angular 5:

  <mat-card>
      <mat-card-title> Test message </mat-card-title>
  </mat-card>

J'ai compris:  One text

Comment puis-je l'obtenir (certains textes sont alignés à gauche, d'autres à droite)?  enter image description here

J'ai essayé de créer div et d'y insérer des paragraphes avec css prédéfini, mais cela n'a pas fonctionné. 

htmlcssangularangular-materialangular5
2
trthhrtz

Vous pouvez également le faire avec moins de lignes et l’ajuster mieux au contenu en utilisant un conteneur et les propriétés flex: 

<mat-card class="card-container">
  <mat-card-title > Test message </mat-card-title>
  <mat-card-title> Test message </mat-card-title>
</mat-card>

et ce CSS: 

.card-container {
  /*  not needed styles to reflect it */ 
  background: blue;
  padding: 10px;
  color: white;
  /* needed styles below */
  display: flex;
  justify-content: space-between;
  width: 500px;
}

Vous pouvez consulter un exemple de travail ici: https://jsfiddle.net/VanessaRC/Lz9vz6bs/1/

Cela garantirait que, si vous ajustez la largeur au conteneur dont vous avez besoin, le style s'adapte parfaitement pour ne pas casser et conserve votre code HTML clair et facile à lire.

5
Vanessa

Utilisez flexbox:

.container {
  display: flex;
}

.fill {
  flex: 1;
}
<div class="container">
  <div>Card</div>
  <div class="fill"></div>
  <div>Title</div>
</div>

5
Tomasz Kula

Je ne peux pas voir les images, mais voici comment diviser le texte en div en utilisant la disposition souple

.container {
  /* Style */
  height: 64px;
  line-height: 64px;
  background: teal;
  color: white;
  font-family: Helvetica;
  padding: 12px;
  box-sizing: border-box;
  /* Actual logic */
  display: flex;
  align-items: center;
  justify-content: center;
}

.container div:last-child {
  text-align: right;
}

.container div {
  flex: 1 1 auto;
}
<div class="container">
  <div>Card</div>
  <div>Title</div>
</div>

1
trichetriche

Bien que les affiches précédentes répondent suffisamment à la question, une fois que vous avez ajouté du contenu à une carte, cela devient plus compliqué ... Je suggère de rechercher cette réponse pour une solution plus complète: Comment aligner les cartes de texte gauche et droite -tête en angulaire 4?

0
erin