html - 最小化 ul 以戏剧性的方式改变 li

Question

我有这张 table

当我最小化浏览器时，我得到了这个:

请查看选项卡和选择，它们变化很大。

这是我的asp代码

<div id="newUpContainer" style="width: 100%; float: left;">
        <div id="onlineBookingDiv" style="float: right; width: 40%;  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>
                        <label style="float: right">
                            <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>
                    </ul>

这是CSS:

编辑

这是CSS

.ui-tabs {
    position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
    padding: .2em;
}
.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 1px .2em 0 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: -1px;
    padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
    cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
    cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: none;
}

Answer 1

当您在调整大小后检查这些选项卡时，如果您将 padding let 减少到 padding: 0.3em;，您将在 css 中得到 .ui-tabs .ui-tabs-nav .ui-tabs-anchor this selector或更少和 .ui-tabs .ui-tabs-nav li 到 1px 0 0 的边距可能会解决您的问题

你也可以找到这个 url webdesignerwall.com/tutorials/responsive-design-in-3-steps有助于响应式断点

希望对您有所帮助!