0
votes

dessiner carré extérieur contient css

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Neglected Moment</title>
      <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
      <div class="grid-container">
          <div class="square"></div>
          <div class="contain">
              <label class="grid-items">Username</label>
              <input type="text" class="ans" id="ans-user" name="ans-user"></input>
              <label class="grid-items">Password</label>
              <input type="text" class="ans" id="ans-pass" name="ans-pass"></input>
              <button class="button login">login</button>
         </div>
      </div>
  </body>
</html>

html css web shapes draw

3 commentaires

Pourquoi ne pas simplement utiliser une bordure autour du contenu; parce que cela semblerait résoudre le problème assez facilement?

fieldset

Ok, c'est une bonne idée.

3 Réponses :

1
votes

Supprimer la hauteur de .Contain code> classe et ajoutez un bouton à l'aide de la position absolue

p>



<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Neglected Moment</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="grid-container">
    <div class="contain">
      <label class="grid-items">Username</label>
      <input type="text" class="ans" id="ans-user" name="ans-user"/>
      <label class="grid-items">Password</label>
      <input type="text" class="ans" id="ans-pass" name="ans-pass"/>
      <button class="button login">login</button>
    </div>
  </div>
</body>
</html>

1 commentaires

Bonne réponse. J'ajouterais la position: relatif; au conteneur .grid, la position absolue de .Container serait la même, peu importe la hauteur du corps.

0
votes

Le problème est dans votre

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Neglected Moment</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="grid-container">
    <div class="contain">
      <label class="grid-items">Username</label>
      <input type="text" class="ans" id="ans-user" name="ans-user"></input>
      <label class="grid-items">Password</label>
      <input type="text" class="ans" id="ans-pass" name="ans-pass"></input>
      <button class="button login">login</button>
    </div>
  </div>
</body>

</html>

0 commentaires

0
votes

Pourquoi pas un filet de champ:

https://jsfiddle.net/mplungjan/utpnxfca/ a> p>

<div class="grid-container">
  <div class="square"></div>
  <fieldset class="contain">
    <legend>Login</legend>
    <label class="grid-items">Username</label>
    <input type="text" class="ans" id="ans-user" name="ans-user" />
    <label class="grid-items">Password</label>
    <input type="text" class="ans" id="ans-pass" name="ans-pass" />
    <button class="button login">login</button>
  </fieldset>
</div>

2 commentaires

Comment définir le formulaire de connexion sur YCENTER avec une forme carrée sur le dessus

S'il vous plaît poser une nouvelle question