Question

I am trying to create two column boxes with clickable headers. I have everything setup and working but when I was testing I realized only half of the header was clickable. On the left column, the left half is clickable. On the right column, the right half is clickable. The 'a' tag applies to the entire header.

<section class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="item-block">
                    <a href="#"><h3 class="block-header">#</h3></a>
                    <p>#</p>
                </div>
                <div class="item-block">
                    <a href="#"><h3 class="block-header">#</h3></a>
                    <p>#</p>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="item-block">
                    <a href="#"><h3 class="block-header">#</h3></a>
                    <p>#</p>
                </div>
                <div class="item-block">
                    <a href="#"><h3 class="block-header">#</h3></a>
                    <p>#</p>
                </div>      
            </div>
        </div>
    </section>

I have added a picture of the layout. At the top of each item-block is a block-header which is the blue bar. The red part is the part that is linked. The blue part does nothing.

的一半

css：

.item-block {
    border: 2px solid #0026FF;
    margin-left:20px;
    margin-right:20px;
    margin-bottom:20px;
    border-radius: 6px;
    font-size:1.2em;
}

.block-header {
    text-align:center;
    background:#0026FF;
    padding:10px;
    color:white;
    margin-top:0px;
    margin-bottom:10px;
    border-radius: 3px 3px 0px 0px;
}

.item-block .block-header a {
    color:white;
    display:block;
}

任何人都知道如何解决此问题，以便整个标题可以点击？

Answer 1

我发现问题是我网页的另一部分。页面下方是一个居中的列，它与页面中心的任何内容重叠，使得这些一半不能正常工作。我更改了双列的z-index以将其放在居中的列上方，现在它可以正常工作。

只有<a> tag is linked

1 个答案: