Css <；a>；标签占据了整个宽度，尽管我将其设置为100px

我有下面的代码，可以在单击灯箱时打开灯箱中的产品标签。在移动设备上查看时，它会显示相同的图像，但单击后会在新选项卡中打开标签。（lightbox响应灵敏，因此在手机上图像太小）

但由于某些原因，当在“移动视图”上时，标记会占据整个宽度，因此如果单击其右侧，它将在新选项卡中打开图像。我不明白为什么会这样，因为我把它的宽度设置为100px

<style>
#lightbox {
    position: fixed;
    /* keeps the lightbox window in the current viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    /*use below to make a 1px black image with 75% opacity for the dark background instead of above. above has issues in IE*/
    /*background:url(overlay.png) repeat; */
    text-align: center;
    z-index: 99999;
}

#lightbox p {
    text-align: center;
    color: #fff;
    margin-right: 20px;
    font-size: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
    z-index: 99999;
}

#lightbox img {
    box-shadow: 0 0 25px #111;
    -webkit-box-shadow: 0 0 25px #111;
    -moz-box-shadow: 0 0 25px #111;
    width:80%;
    max-width: 940px;
    max-height: 800px;
    z-index: 99999;
}

.mobile_label_view{
display:none;
}

@media only screen and (max-width: 950px) {

    .lightbox_trigger{
    display:none;

    }
    .mobile_label_view{
display:block;

}
}

.lightbox_trigger{
    margin-top:15px;
    cursor: pointer;
}
.mobile_label_view{
    margin-top:15px;
    cursor: pointer;
}
a.label_container{
    max-width:100px !important;
    width:100px !important;
}
</style>

<div id="wrapper">
    <!--have view label text-->
    <!--<a href="/image.png" class="lightbox_trigger">-->
 <!--               View Label-->
 <!--               </a>-->
 <!--               <a href="/image.png" target="_blank" class="mobile_label_view">-->
 <!--               View Label-->
 <!--               </a>-->
 <img src="/image.png" width="100px" class="lightbox_trigger">
 <a href="/image.png" target="_blank" class="label_container"><img src="/image.png" width="100px" class="mobile_label_view"></a>
</div>
<!-- #/wrapper -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    jQuery(document).ready(function($) {

        $('.lightbox_trigger').click(function(e) {

            //prevent default action (hyperlink)
            e.preventDefault();

            //Get clicked link href
            //var image_href = $(this).attr("href");
            //Get clicked link src
            var image_href = $(this).attr("src");

            /*  
            If the lightbox window HTML already exists in document, 
            change the img src to to match the href of whatever link was clicked

            If the lightbox window HTML doesn't exists, create it and insert it.
            (This will only happen the first time around)
            */

            if ($('#lightbox').length > 0) { // #lightbox exists

                //place href as img src value
                $('#content').html('<img src="' + image_href + '" />');

                //show lightbox window - you could use .show('fast') for a transition
                $('#lightbox').show();
            }

            else { //#lightbox does not exist - create and insert (runs 1st time only)

                //create HTML markup for lightbox window
                var lightbox =
                    '<div id="lightbox">' +
                    '<p onclick=\'hideLightbox()\'>Click to close</p>' +
                    '<div id="content">' + //insert clicked link's href into img src
                    '<img src="' + image_href + '" />' +
                    '</div>' +
                    '</div>';

                //insert lightbox HTML into page
                $('body').append(lightbox);
            }

        });

        //Click anywhere on the page to get rid of lightbox window
        $('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
            $('#lightbox').hide();
        });

    });

    function hideLightbox() {

        $('#lightbox').hide();
    }
</script>

#灯箱{
位置：固定；
/*将灯箱窗口保持在当前视口中*/
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,7）；
/*使用下面的方法制作一张1px的黑色图像，在黑色背景下不透明度为75%，而不是上面的方法。上面的方法在IE中有问题*/
/*背景：url（overlay.png）重复*/
文本对齐：居中；
z指数：99999；
}
#灯箱p{
文本对齐：居中；
颜色：#fff；
右边距：20px；
字体大小：20px；
边缘底部：10px；
边缘顶部：10px；
z指数：99999；
}
#灯箱img{
盒影：0.25px#111；
-网络工具包盒阴影：0 25px#111；
-moz盒阴影：0 25px#111；
宽度：80%；
最大宽度：940px；
最大高度：800px；
z指数：99999；
}
.移动标签视图{
显示：无；
}
@仅介质屏幕和（最大宽度：950px）{
.lightbox_触发器{
显示：无；
}
.移动标签视图{
显示：块；
}
}
.lightbox_触发器{
边缘顶部：15px；
光标：指针；
}
.移动标签视图{
边缘顶部：15px；
光标：指针；
}
a、 给集装箱贴标签{
最大宽度：100px！重要；
宽度：100px！重要；
}
jQuery（文档）.ready（函数（$）{
$（'.lightbox_触发器'）。单击（函数（e）{
//防止默认操作（超链接）
e、 预防默认值（）；
//点击链接href
//var image_href=$（this.attr（“href”）；
//点击链接src
var image_href=$（this.attr（“src”）；
/*  
如果文件中已存在lightbox窗口HTML，
将img src更改为与单击的任何链接的href相匹配
如果lightbox窗口HTML不存在，请创建并插入它。
（这只会在第一次发生）
*/
如果（$（'#lightbox'）.length>0）{/#lightbox存在
//将href放置为img src值
$（'#content'）.html（''）；
//显示灯箱窗口-您可以使用.show（'fast'）进行转换
$（“#lightbox”）.show（）；
}
else{/#lightbox不存在-创建并插入（仅第一次运行）
//为lightbox窗口创建HTML标记
var灯箱=
'' +
“
单击以关闭+
''+//将点击链接的href插入img src
'' +
'' +
'';
//将lightbox HTML插入页面
$（'body'）。追加（lightbox）；
}
});
//单击页面上的任意位置以摆脱lightbox窗口
$（'#lightbox'）.live（'click'，function（）{//必须使用live，因为lightbox元素插入到DOM中
$（“#lightbox”）.hide（）；
});
});
函数hideLightbox（）{
$（“#lightbox”）.hide（）；
}

您有：

@media only screen and (max-width: 950px) {

    .lightbox_trigger{
      display:none;
    }
    .mobile_label_view{
      display:block;
    }
}

将

.mobile\u label\u view

从

display:block

更改为

display:inline

块元素（如

div

）占用可用的全部宽度，而内联元素（如

span

）只占用所需的宽度

下面是一个链接到cat pic的JSFIDLE示例：