Dev Faq
1
votes

Le bloc d'affichage n'aligne pas mes éléments d'étiquette au-dessus de mes éléments d'entrée?

Je veux que mon élément label s'aligne directement au-dessus et sur le côté gauche de mon élément input . Ainsi, comme un formulaire standard, le label sera en haut à gauche de l'élément input . J'ai essayé d'utiliser display: block sur l'étiquette et sur les éléments d'entrée, j'ai essayé d'utiliser align content / items et en utilisant flexbox. Rien ne fonctionne jusqu'à présent.

Ceci est mon HTML 

html, body {
  font-family: 'Nunito', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background: linear-gradient(90deg, rgb(0, 104, 241), rgb(48, 52, 255));
}

/* ANCHORS */

.anchor-div {
  display: flex;
  justify-content: center;
  margin-top: 4%;
}

.anchor-btn {
  display: block;
  width: 40%;
  height: 10%;
  background:#fff;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  color: rgb(0, 119, 255);
  font-weight: bold;
  line-height: 25px;
  text-decoration: none;
}

a:hover {
  color: rgb(15, 15, 15);
}

/* MOVIE INPUTS AND FORMS */

.create-movie-form {
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  margin: auto;
  font-family: 'Nunito', sans-serif;
  background-color: #fff;
  padding-bottom: 5%;
  padding-top: 3%;
  max-width: 95%;
}

label {
  display: block;
  width: 100%;
  margin-top: 6%;
  margin-left: 10%;
  font-size: 12px;
}

input {
  font-family: 'Nunito', sans-serif;
  border-radius: 3px;
  border: 1px rgb(216, 215, 215) solid;
  margin: 0 auto auto auto;
  padding: 2.5% 1.5%;
  width: 70%;
}

input:focus {
  border: 2px solid rgb(0, 0, 255);
}

/* BUTTONS */

button {
  font-family: 'Nunito', sans-serif;
  width: 43%;
  padding: 6px;
  border-radius: 5px;
  font-weight: bolder;
  font-size: 15px;
  background: rgb(0, 119, 255) ;
  border: solid 1px #fff;
  margin: 5% auto auto auto;
  color: #fff;
  letter-spacing: 1px;
}

/* MOVIE LIST */

#movie-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  column-gap: 1fr;
  row-gap: 1fr;
}

section {
  border: 2px #fff solid;
  border-radius: 5px;
  background: #fff;
  color: rgb(0, 119, 255);
  margin: 2%;
  padding: 2%;
  animation: 
    sectionSlideDown .5s ease-out,
    fadeIn .5s ease-in;
}

.id {
  margin-left: 2%;
}

Ceci est mon CSS 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/main.css"></link>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
  <div id="notification"> 
    <btn id="close"> Close </btn>
  </div>

  <h3>Movie Reviews</h3>
   
  <div id="error-div"></div>

  <form class="create-movie-form" action="submit">
    <label for="title">Movie Title:</label>
    <input type="text" name="title" id="title" placeholder="Movie Title" />
    <label for="runtime">Movie Runtime:</label>
    <input type="text" name="runtime" id="runtime" placeholder="Runtime" />
    <label for="rating">Movie Rating:</label>
    <input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
    <label for="review">Movie Review:</label>
    <input type="text" name="review" id="review" placeholder="Write a review for this movie" />
    <button type="submit" id="create-btn">Create movie</button>
  </form>

  <script src="../node_modules/axios/dist/axios.min.js"></script>
  <script src="functions.js"></script>
  <script src="main.js"></script>
</body>
</html>

Merci pour toute aide!

0 commentaires

3 Réponses :

1
votes

Essayez ceci! Solution utilisant CSS Flexbox 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/main.css"></link>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
  <div id="notification"> 
    <btn id="close"> Close </btn>
  </div>

  <h3>Movie Reviews</h3>
   
  <div id="error-div"></div>

  <form class="create-movie-form" action="submit">
    <label for="title">Movie Title:</label>
    <input type="text" name="title" id="title" placeholder="Movie Title" />
    <label for="runtime">Movie Runtime:</label>
    <input type="text" name="runtime" id="runtime" placeholder="Runtime" />
    <label for="rating">Movie Rating:</label>
    <input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
    <label for="review">Movie Review:</label>
    <input type="text" name="review" id="review" placeholder="Write a review for this movie" />
    <button type="submit" id="create-btn">Create movie</button>
  </form>

  <script src="../node_modules/axios/dist/axios.min.js"></script>
  <script src="functions.js"></script>
  <script src="main.js"></script>
</body>
</html>
html, body {
  font-family: 'Nunito', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background: linear-gradient(90deg, rgb(0, 104, 241), rgb(48, 52, 255));
}

/* ANCHORS */

.anchor-div {
  display: flex;
  justify-content: center;
  margin-top: 4%;
}

.anchor-btn {
  display: block;
  width: 40%;
  height: 10%;
  background:#fff;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  color: rgb(0, 119, 255);
  font-weight: bold;
  line-height: 25px;
  text-decoration: none;
}

a:hover {
  color: rgb(15, 15, 15);
}

/* MOVIE INPUTS AND FORMS */

.create-movie-form {
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  margin: auto;
  font-family: 'Nunito', sans-serif;
  background-color: #fff;
  padding-bottom: 5%;
  padding-top: 3%;
  max-width: 95%;
}

label {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 73%;
  margin-left: auto;
  margin-right: auto;
  padding: 3px;
  font-size: 12px;
}

input {
  font-family: 'Nunito', sans-serif;
  border-radius: 3px;
  border: 1px rgb(216, 215, 215) solid;
  margin: 0 auto auto auto;
  padding: 2.5% 1.5%;
  width: 70%;
}

input:focus {
  border: 2px solid rgb(0, 0, 255);
}

/* BUTTONS */

button {
  font-family: 'Nunito', sans-serif;
  width: 43%;
  padding: 6px;
  border-radius: 5px;
  font-weight: bolder;
  font-size: 15px;
  background: rgb(0, 119, 255) ;
  border: solid 1px #fff;
  margin: 5% auto auto auto;
  color: #fff;
  letter-spacing: 1px;
}

/* MOVIE LIST */

#movie-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  column-gap: 1fr;
  row-gap: 1fr;
}

section {
  border: 2px #fff solid;
  border-radius: 5px;
  background: #fff;
  color: rgb(0, 119, 255);
  margin: 2%;
  padding: 2%;
  animation: 
    sectionSlideDown .5s ease-out,
    fadeIn .5s ease-in;
}

.id {
  margin-left: 2%;
}

0 commentaires
2
votes

1.) Faites en sorte que la marge gauche de étiquette soit de 15% (ce qui correspond à la moitié du reste de la largeur totale à 100% moins 70% de la largeur du input element).

2.) Ajoutez box-sizing: border-box à l'¬nput` afin d'inclure le remplissage gauche et droit et la bordure dans le calcul de la largeur de 70%: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/main.css">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
  <div id="notification"> 
    <btn id="close"> Close </btn>
  </div>

  <h3>Movie Reviews</h3>
   
  <div id="error-div"></div>

  <form class="create-movie-form" action="submit">
    <label for="title">Movie Title:</label>
    <input type="text" name="title" id="title" placeholder="Movie Title" />
    <label for="runtime">Movie Runtime:</label>
    <input type="text" name="runtime" id="runtime" placeholder="Runtime" />
    <label for="rating">Movie Rating:</label>
    <input type="text" name="rating" id="rating" placeholder="What's your rating for this movie?" />
    <label for="review">Movie Review:</label>
    <input type="text" name="review" id="review" placeholder="Write a review for this movie" />
    <button type="submit" id="create-btn">Create movie</button>
  </form>

  <script src="../node_modules/axios/dist/axios.min.js"></script>
  <script src="functions.js"></script>
  <script src="main.js"></script>
</body>
</html>
html, body {
  font-family: 'Nunito', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background: linear-gradient(90deg, rgb(0, 104, 241), rgb(48, 52, 255));
}

/* ANCHORS */

.anchor-div {
  display: flex;
  justify-content: center;
  margin-top: 4%;
}

.anchor-btn {
  display: block;
  width: 40%;
  height: 10%;
  background:#fff;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  color: rgb(0, 119, 255);
  font-weight: bold;
  line-height: 25px;
  text-decoration: none;
}

a:hover {
  color: rgb(15, 15, 15);
}

/* MOVIE INPUTS AND FORMS */

.create-movie-form {
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  margin: auto;
  font-family: 'Nunito', sans-serif;
  background-color: #fff;
  padding-bottom: 5%;
  padding-top: 3%;
  max-width: 95%;
}

label {
  display: block;
  width: 100%;
  margin-top: 6%;
  margin-left: 15%;
  font-size: 12px;
}

input {
  font-family: 'Nunito', sans-serif;
  border-radius: 3px;
  border: 1px rgb(216, 215, 215) solid;
  margin: 0 auto auto auto;
  padding: 2.5% 1.5%;
  width: 70%;
  box-sizing: border-box;
}

input:focus {
  border: 2px solid rgb(0, 0, 255);
}

/* BUTTONS */

button {
  font-family: 'Nunito', sans-serif;
  width: 43%;
  padding: 6px;
  border-radius: 5px;
  font-weight: bolder;
  font-size: 15px;
  background: rgb(0, 119, 255) ;
  border: solid 1px #fff;
  margin: 5% auto auto auto;
  color: #fff;
  letter-spacing: 1px;
}

/* MOVIE LIST */

#movie-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  column-gap: 1fr;
  row-gap: 1fr;
}

section {
  border: 2px #fff solid;
  border-radius: 5px;
  background: #fff;
  color: rgb(0, 119, 255);
  margin: 2%;
  padding: 2%;
  animation: 
    sectionSlideDown .5s ease-out,
    fadeIn .5s ease-in;
}

.id {
  margin-left: 2%;
}

3 commentaires

Cela a parfaitement fonctionné! Merci beaucoup! Question rapide donc vous avez dit que nous utilisons les 30% restants et la moitié à 15%, cela fonctionne parfaitement. Mais pourquoi est-ce? Pourquoi 50% ne fonctionne-t-il pas? CSS est mon point faible donc j'essaie toujours d'en savoir plus! Merci encore.

@JasonPallone Parce que vous avez déjà width: 70% pour les éléments .. donc Johannes a utilisé les 30% restants, puis a divisé chaque côté en 15% de morceaux

@TannerDolby Ok merci! Donc, dans ce cas, c'est 70% de largeur pour l'entrée parce que c'est ce que j'ai spécifié, alors c'est 15% de largeur disponible de chaque côté de l'entrée, car 30% de largeur totale reste disponible?

0
votes

Essayez display:inline-block

<span style="display:inline-block;border:1px solid blue;">
  <span style="padding-right:1em;align:left;border:1px solid red;">
    <label for="myInput">My input:</label>
  </span>
  <br>
  <span style="padding-left:1em;text-align:right;border:1px solid green;">
    <input id="myInput">
  </span>
</span>

Je sais: trop de div s ... 

<span style="display:inline-block;border:1px solid blue;">
  <span style="padding-right:1em;align:left;border:1px solid red;">label</span><br>
  
  <span style="padding-left:1em;text-align:right;border:1px solid green;">input</span>
</span>

<div style="display:inline-block;border:1px solid blue;">
  <div style="padding-right:1em;align:left;border:1px solid red;">label</div>
  <div style="padding-left:1em;text-align:right;border:1px solid green;">input</div>
</div>

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor