HTML 图像扩展更远并阻止链接

Question

我放置的图像阻止我点击链接，我认为这是因为图像可能比我想象的要大(虽然我认为我裁剪了它，但我不确定它是否是其他原因。

这是一张图片(为了避免这个问题，我把他的图片移得尽可能远，但如果这个问题可以解决，我想把图片移近一点，我觉得了解它会有所帮助 future ):

注意:如果我向右移动它，它不会推送内容或任何东西，它只会使导航栏中的链接不可点击(如果不清楚的话)。

这是 HTML:

                    <nav>
                    <ul>
                        <li class="current"><a href="index.html">Home</a></li>
                        <li><a href="jehovah'sWitness.html">Jehovah's Witness</a></li>
                        <li><a href="blockPrinting.html">Wood Block Print</a></li>
                        <li><a href="jazz.html">Jazz</a></li>
                        <li><a href="abercrombie.html">Being Ethical and Socially Responsible</a>    </li>
                    </ul>
                    </nav>

                <div class="container">

                <header>
                    <h1>
                        <img src="images/banner.png" alt="banner">
                        <a href="index.html">Designer Websites</a>
                    </h1>
                </header>

和我的 CSS:

            nav ul
                {
                list-style-type: none;
                text-align: center;
                }
            nav ul li
                {    
                padding: 5px;
                display: inline-block;
                border: solid 1px black;
                color: black;
                background-color: tan;
                }

            .current
                {
                    background-color: yellow;
                }

            body
                {
                background-color: tan;
                font-family: Arial, "Times New Roman", "Sans Serif", Georgia;
                }

            .container
                {
                width: 80%;
                max-width: 960px;
                margin:0px auto;
                }

            h1 img
                {
                height: 40%;
                position:absolute;
                left:-15px;
                top: -30px;
            }

删除了绝对位置的新图片:

Answer 1

我认为您的“绝对”定位横幅图像漂浮在导航栏上。这就是它不可点击的原因。

删除此代码(您可以保留“高度”以设置图像的固定高度)

h1 img {
    height: 40%;
    position: absolute;
    left: -15px;
    top: -30px;
}

现在图像和标题将左对齐。您可以通过在 .container 中添加 text-align:center 来简单地对齐它们。或者您可以添加此代码:

header {
    text-align: center;
}