Question

这是我的网站：http://vani.valse.com.my/schone_lightings/index.php 我不希望<hr>标记出现在文本框的顶部，并在class =＆＃34; subscribe＆＃34;下提交按钮。我尝试为订阅类设置更高的z-index，但它没有帮助！

HTML

<div class="hide-for-small-only hide-for-medium-only  line_wrapper"><!--start of line bg div-->
    <hr class="hr_tag"/>
            <div class="row collapse">
                <div class="small-12 medium-12 large-6 large-centered columns subscribe">
                    <div class="row collapse">
                    <div class="small-12 medium-12 large-10 columns">
                    <input type="text" value="" placeholder="Enter your email address for newsletter subscription"> 
                    </div>
                    <div class="small-12 medium-12 large-2 columns">
                        <input type="submit" value="SUBSCRIBE">
                    </div>
                     </div>
                </div>
            </div>
</div><!--end of line bg div-->

CSS

.line_wrapper
{
    margin-top:3%;
    margin-bottom:3%;
    position: relative;

}
.subscribe
{
z-index: 60;
}

.subscribe input[type="submit"]

{

    background-color:#000;

    color:#fff;

    border: 1px solid #000;

    padding:10px;

    height: 50px;


}

.subscribe input[type="text"]

{



    color:#000;

    padding:10px;

    height:50px;

}
.hr_tag {
    position: absolute;
    z-index: 50;
    top: 10px;
    right: 0;
    left: 0;
}

Answer 1

删除hr_tag的样式，因为绝对定位的元素将在常规静态内容之上“分层”。

/* position: absolute; */
/* z-index: 50; */
/* top: 10px; */
/* right: 0; */
/* left: 0; */

Answer 2

您首先在顶部div上应用了background line image，然后将opacity:0.9提供给row div。因此，在textbox and button上可以看到该行的背景图像。或者，您可以仅删除文本框和按钮的不透明度，或者删除线图像的中间部分。

Answer 3

从

移除内联Background-Image属性

<div style="**background-image: url('img/line.png')**;background-repeat: repeat-x;z-index: 50;" class="line"><!--start of line bg div-->
    <!--<hr class="hr_tag"/>-->
            <div class="row collapse">
                <div class="small-10 small-centered medium-6 large-centered columns subscribe">
                    <div class="row collapse">
                    <div class="small-12 medium-12 large-10 columns">
                    <input type="text" placeholder="Enter your email address for newsletter subscription" value=""> 
                    </div>
                    <div class="small-12 medium-12 large-2  columns">
                        <input type="submit" value="SUBSCRIBE">
                    </div>
                     </div>
                </div>
            </div>
</div>

如何使hr标签在文本框中不可见

3 个答案: