Question

Ok here is my complete page 我试图在我的投资组合页面上工作，到目前为止，我试图让我的徽标图像从左边缘无法点击，但我无法弄清楚如何。

到目前为止，这是我的代码：

徽标的HTML：

    <!-- My img logo -->
    <a class ="navbar-brand" href="#"><img class="img-logo" 
    src="http://i.imgur.com/H1mje3y.jpg" alt=""></a>

徽标的CSS：

.img-logo{
height: 200%;
margin: -9px 0 30px 500px;
border-radius: 40%;
border: 3.5px solid maroon;
}

正如你所看到的，我必须将左边的边距设置为500以使我的徽标居中，但我不希望边距可以通过将其悬停在上面，我只想让徽标可点击!!我该如何做到这一点？

Answer 1

你真的应该将它包装在一个包装div中并将text-align: center放在那里，然后在.img-logo上删除你的边距：

<div class="wrapper">
    <a class ="navbar-brand" href="#">
        <img class="img-logo" src="http://i.imgur.com/H1mje3y.jpg" alt="">
    </a>
</div>

    .wrapper {
        text-align: center;
    }

    .img-logo{
       display: inline-block;
       height: 200%;
       border-radius: 40%;
       border: 3.5px solid maroon;
    }

CodePen

Answer 2

你可以试试这个：

.img-logo{
    margin: -9px 0 30px 500px;
    border-radius: 40%;
    border: 3.5px solid maroon;
    position: absolute;
    width: 40px;
    height: 40px;
}

Answer 3

将保证金添加到.navbar-brand，如果已在其他位置使用.navbar-brand，则添加新类或替换该类。

Answer 4

使用pointer-events: none

http://codepen.io/zer00ne/pen/WrWryp?editors=0110

.img-logo{
height: 200%;
margin: -9px 0 30px 500px;
border-radius: 40%;
border: 3.5px solid maroon;
pointer-events: none;
}

Answer 5

您可以随时拆分图像并使用CSS独创性将它们“拼接”在一起，并将所需部分包装在超链接元素中...... ＆lt; img src =“”alt =“”id =“non-clickable”＆gt;＆lt; a href =“”＆gt;＆lt; img src =“”alt =“”id =“clickable”＆gt;＆lt; /一个＆GT; ......但在响应式设计方面，这比解决方案带来的问题更多。避免这种方法。您必须使用地图和区域元素才能获得最佳结果。＆lt; area＆gt; element定义可以与超链接关联的区域。此元素必须嵌套在＆lt; map＆gt;＆lt; / map＆gt;中元件。 Chrome，IE，Edge，Firefox，Safari和Opera都支持这两个标签。请参阅以下示例：＆lt; img src =“MyLogo”alt =“我的徽标”width =“100”height =“100”usemap =“＃logoMap”＆gt; 然后应用通过usemap属性关联的map元素。＆lt; map name =“logoMap”＆gt; ＆lt; area shape =“rect”coords =“x1，y1，x2，y2”href =“link.html”alt =“clickable”＆gt; ＆lt; area shape =“rect”coords =“x1，y1，x2，y2”alt =“non-clikable”＆gt; ＆LT; /地图＆GT;

如何使我的徽标图像左侧不可点击？

5 个答案: