爲什麼我的<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/