Pourquoi mon <input type = "submit"> ne s'affiche-t-il pas?

Question

Je veux ajouter un bouton à l'en-tête, mais ce n'est pas affiché; Je pense que ça va sous la div. Pourquoi? J'ai essayé de changer la position absolue, mais rien ne fonctionne.

.large-header { 
 
    position: relative; 
 
    width: 100%; 
 
    background: #333; 
 
    overflow: hidden; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    z-index: 1; 
 
} 
 
.demo-1 .large-header { 
 
    background-image: url('../img/demo-1-bg.jpg'); 
 
} 
 
.main-title { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    color: #f9f1e9; 
 
    text-align: center; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate3d(-50%,-50%,0); 
 
    transform: translate3d(-50%,-50%,0); 
 
} 
 
.homebtn { 
 
    position:absolute; 
 
    -webkit-border-radius: 4; 
 
    -moz-border-radius: 4; 
 
    border-radius: 4px; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 41px; 
 
    background: #f0712c; 
 
    padding: 10px 20px 10px 20px; 
 
    text-decoration: none; 
 
} 
 
.homebtn:hover { 
 
    background: #f25e0e; 
 
    text-decoration: none; 
 
}

<div class="container demo-1"> 
 
    <div class="content"> 
 
     <div id="large-header" class="large-header"> 
 
      <canvas id="demo-canvas"></canvas> 
 
      <h1 class="main-title"><?php echo $home_page['header_title']; ?></h1> 
 
      <form action="../html-link.htm"> 
 
       <input style="homebtn" type="submit" value="This is a button link"> 
 
      </form> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Vous avez définir un style, mais est est une classe.

remplacer

<input style="homebtn" type="submit" value="This is a button link"> 

par

<input class="homebtn" type="submit" value="This is a button link"> 

Answer 2

Vous devez supprimer mot "style" de l'entrée et écrire "classe". « Style » est utilisé pour le style en ligne

Cocher cette

<input class="homebtn" type="submit" value="This is a button link"> 

Espérons que cela vous aidera :)

Answer 3

en HTML au lieu de la classe de frappe de votre bouton, vous avez le style typé. code correct ici:

<input class="homebtn" type="submit" value="This is a button link"> 

Answer 4

1. changement style="homebtn"-class="homebtn", parce que vous ajoutez en fait une classe, pas de style à la balise. Ajouter le positionnement à .homebtn. Par exemple, top: 0; left: 0; pour le placer dans le coin supérieur gauche.

/* Header */ 
 
.large-header { 
 
    position: relative; 
 
    width: 100%; 
 
    background: #333; 
 
    overflow: hidden; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    z-index: 1; 
 
} 
 

 
.demo-1 .large-header { 
 
    background-image: url('../img/demo-1-bg.jpg'); 
 
} 
 

 
.main-title { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    color: #f9f1e9; 
 
    text-align: center; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate3d(-50%,-50%,0); 
 
    transform: translate3d(-50%,-50%,0); 
 
} 
 

 
.homebtn { 
 
    position:absolute; 
 
    top: 0; 
 
    left :0; 
 
    -webkit-border-radius: 4; 
 
    -moz-border-radius: 4; 
 
    border-radius: 4px; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 41px; 
 
    background: #f0712c; 
 
    padding: 10px 20px 10px 20px; 
 
    text-decoration: none; 
 
} 
 

 
.homebtn:hover { 
 
    background: #f25e0e; 
 
    text-decoration: none; 
 
}

<div class="container demo-1"> 
 
    <div class="content"> 
 
    <div id="large-header" class="large-header"> 
 
     <canvas id="demo-canvas"></canvas> 
 
     <h1 class="main-title"><?php echo $home_page['header_title']; ?></h1> 
 
     <form action="../html-link.htm"> 
 
     <input class="homebtn" type="submit" value="This is a button link"> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

Answer 5

styles de changement de classe dans

<input class="homebtn" type="submit" value="This is a button link"> 

Déposer le positionnement du bouton. Ex:

.homebtn { 
    -webkit-border-radius: 4; 
    -moz-border-radius: 4; 
    border-radius: 4px; 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 41px; 
    background: #f0712c; 
    padding: 10px 20px 10px 20px; 
    text-decoration: none; 
    position: absolute; 
    top: 100px; 
} 

Voir jsFiddle: https://jsfiddle.net/uwducdqq/