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

Question

我有下面的代码，可以在点击灯箱时在灯箱中打开产品标签。当在移动设备上查看时，它会显示相同的图像，但单击它会在新选项卡中打开标签。（灯箱是响应式的，所以图片在移动设备上太小了）。

出于某种原因，虽然在移动设备视图中，标签占据了整个宽度，因此如果您单击它的右侧，它将在新选项卡中打开图像。我不明白这是为什么，因为我将它的宽度设置为 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>

Answer 1

您有：

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

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

将 .mobile_label_view 从 display:block 更改为 display:inline。

块元素，例如 div，占据了可用的全部宽度，而内联元素，例如 span，只占用它需要的宽度。

这里有一个链接到猫图片的 jsfiddle 示例：http://jsfiddle.net/ethanryan/mg1vjeo2/

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

<a> tag taking up full width despite me setting it to 100px

css

tags

width

responsive