为什么我的<input type =“submit”/>没有显示?

时间:2017-10-20 13:01:10

标签: html css css3

我想在标题中添加一个按钮,但它没有显示;我认为这是在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>

5 个答案:

答案 0 :(得分:2)

您已经定义了一个样式,但它是一个类。

替换

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

通过

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

答案 1 :(得分:0)

您必须从输入中删除单词“style”并写入“class”。 “style”用于内联样式

检查这个

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

希望这会对你有所帮助:)。

答案 2 :(得分:0)

在html而不是为您的按钮键入类,您有键入的样式。在这里更正代码:

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

答案 3 :(得分:0)

  1. style="homebtn"更改为class="homebtn",因为您实际上是在为标记添加类而非样式。
  2. 将定位添加到.homebtn。例如,top: 0; left: 0;将其放在左上角。
  3. /* 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>

答案 4 :(得分:0)

将样式更改为

中的类
 <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/