时间戳

首页 > 解决方案 > 通过 CSS 增加垂直导航栏宽度的问题

html - 通过 CSS 增加垂直导航栏宽度的问题

问题描述

我想知道为什么以下CSS属性的更新：width，position不会放大nav bar我的page.aspx.

作为说明，请在下面找到CSS：

/* The sidebar menu */
.sidenav {
    /*height: 100%;*/ /* Full-height: remove this if you want "auto" height */
    width: 300px; /* Set the width of the sidebar */
    /*position: fixed;*/ /* Fixed Sidebar (stay in place on scroll) */
    position: absolute;
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    /*background-color: #111*/; /* Black */
    background-color: #eee;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 50px;
    font-family: 'Segoe UI Historic';
    font-size: 19px;

}

    /* The navigation menu links */
    .sidenav a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        /*font-size: 25px;*/
        font-size: 19px;
        color: #818181;
        display: block;
        font-family: 'Segoe UI Historic';
    }

        /* When you mouse over the navigation links, change their color */
        .sidenav a:hover {
            /*color: #f1f1f1;*/
            /*color: #2196F3;*/
            color: #1912e3;
            font-family: 'Segoe UI Historic';
        }

/* Style page content */
.main {
    margin-left: 160px; /* Same as the width of the sidebar */
    padding: 0px 10px;
    font-family: 'Segoe UI Historic';
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }
}

body {
    font-family: "Segoe UI Historic";
}

反馈将不胜感激。

标签： htmlcss

解决方案

随机地，基于“反复试验CSS”的方法，我凭经验发现替换property width:300pxbywidth:20%确实有效。random因此，如果可能的话，我希望知道这种发现背后的基本原理。

推荐阅读