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 style="homebtn" type="submit" value="This is a button link">

通过

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

Answer 2

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

检查这个

<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

将style="homebtn"更改为class="homebtn"，因为您实际上是在为标记添加类而非样式。
将定位添加到.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/

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

5 个答案: