为什么我的<input type =“submit”>不显示？

Question

我想添加一个按钮到标题，但它没有显示;我认为这是在div下。为什么？我试图改变绝对位置，但没有任何工作。

.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

你必须定义一个样式，而是一类。

通过

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

Answer 2

你必须从输入删除单词 “风格”，写 “类” 代替

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

。 “风格”用于内嵌样式

检查这个

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

希望这将帮助你:)

Answer 3

在HTML而不是打字类的按钮，您键入的风格。正确的代码在这里：

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

Answer 4

1. 变化style="homebtn"到class="homebtn"，因为你实际上添加一个类，而不是风格的标签。
2. 将定位添加到.homebtn。例如，将top: 0; left: 0;放在左上角。

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

更改样式类

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

添加定位到按钮。例如：

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

见的jsfiddle：https://jsfiddle.net/uwducdqq/