css padding不在媒体上工作

Question

我有这个css：

ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
}

这是媒体上的CSS

@media only screen and (max-width : 500px) {
.ui-tabs .ui-tabs-nav .ui-tabs-anchor
{
    float: left;
    background-color:red;
    padding: 0;
    text-decoration: none;
}
}

媒体中的填充不起作用，我的意思是div仍然采用之前的填充，但是，背景变为红色。那么为什么填充仍然是旧值？

修改

这是正常尺寸的样子

这是窗口改变时的样子

这是我使用firebog删除填充时的外观

HTML

<img src="Styles/purpleLogo.gif" style="float:left;"/>
    <div id="newUpContainer" style="width: 100%; float: left;">
        <div id="onlineBookingDiv" style="float: right; width: 49%;  padding-bottom: 10px;">
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">Today</a></li>
                    <li><a href="#tabs-2">Tomorrow</a></li>
                    <li><a href="#tabs-3">Any Date</a></li>
                    <li style="float: right; position: relative; right:2px">
                    <label >
                        <asp:DropDownList AutoPostBack="true" runat="server" ID="mealTimeSelector" OnSelectedIndexChanged="TodayTab_Click">
                            <asp:ListItem Value="1">Breakfast</asp:ListItem>
                            <asp:ListItem Value="2">Lunch</asp:ListItem>
                            <asp:ListItem Value="3">Dinner</asp:ListItem>
                        </asp:DropDownList>
                    </label>
                        </li>
                </ul>

EDIT2

来自firefox页面源的HTML

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
                    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true"><a href="#tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Today</a></li>
                    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false"><a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Tomorrow</a></li>
                    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false"><a href="#tabs-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Any Date</a></li>
                    <li style="float: right; position: relative; right:2px">
                    <label>
                        <select name="ctl00$MainContent$mealTimeSelector" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$mealTimeSelector\',\'\')', 0)" id="MainContent_mealTimeSelector">
    <option selected="selected" value="1">Breakfast</option>
    <option value="2">Lunch</option>
    <option value="3">Dinner</option>

</select>
                    </label>
                        </li>
                </ul>

Answer 1

请尝试：

@media only screen and (max-width : 500px) {
.ui-tabs .ui-tabs-nav .ui-tabs-anchor
    {
        float: left;
        background-color:red;
        padding: 0 !important;
        text-decoration: none;
    }
}

我还没有看到填充没有在其他地方设置的证据。 此方法将强制覆盖填充。

或者尝试将媒体中的填充设置为正填充并删除默认填充以查看它是否生效。这将确保媒体查询正常工作。