Question

我在某个菜单按钮下面有一行，我想更改六个，因为当你在移动设备上查看它时，线路比菜单更远。在这一点上即使我将大小设置为1px它根本不会改变

HTML代码

<div class="container">
<div class="row">
<div class = "col-sm-12 col-xs-12" style= "background-color:white">
<!--<img  src ="/frontimages/orange_tab_wide_up.jpg" style= "display:inline-block">
<img  style="margin-left:-4px; display:inline-block" src ="/frontimages/blue_tab_wide.jpg">
<img style="margin-left:-4px; display:inline-block" src ="/frontimages/green_tab_wide.jpg">
<img style="margin-left:-4px; display:inline-block" src ="/frontimages/yellow_tab_wide.jpg">-->



<a class="btn-test btn" type="button" id="search" value="" onclick="check()" href="#" role="button">Search</a><a class="btn-test2 btn" type="button" id="search" value=""   onclick="check()" href="#" role="button">Search</a><a class="btn-test3 btn" type="button" id="search" value="" onclick="check()" href="#" role="button">Search</a><a class="btn-test4 btn" type="button" id="search" value="" onclick="check()" href="#" role="button">Search</a>

</div>
</div>
<div class="row"> 
<div class ="col-xs-7 ">
<!-- <img class="img-responsive" src="/frontimages/orange_line_wide.png">-->
<div class="g"> </div>

</div>
</div>
</div>

CSS

  .g {
    height:3px;
    margin-top:-3px;
    background:-moz-linear-gradient(left, #FFFFFF 0%,#28ACEE 50%,#FFFFFF 100%); 
    background:-webkit-linear-gradient(left, #FFFFFF 0%,#28ACEE 50%,#FFFFFF 100%); 
    background:linear-gradient(left, #FFFFFF 0%,#EC9B3F 50%,#FFFFFF 100%);
    width:100%;
    display:block;

    }

    @media (min-width: 300px) and (max-width: 350px) { 
    .g {width:1px;}
    }

    @media (max-width:700px) {
   .g{width: 405px}
    }

Answer 1

为什么必须设置width:1px？不应该width:100%工作吗？

顺便说一下，如果width:100%仍未出界，我会尝试width: 99%。

编辑：将width:100%更改为max-width:100%即可生效！

无法改变图像大小

1 个答案: