个人中心
gpt4 book ai didi

html - 我的导航栏周围的包装器不起作用

转载 作者：行者123 更新时间：2023-11-28 18:01:28 25 4
gpt4 key购买 nike

我的包装器没有响应我的 CSS，我不知道问题出在哪里。

如果没有办法我可以做得更好，我正在尝试让我的导航栏非常小以适合我的整个页面(顶部具有全宽和最小高度)，就像任何常规标题一样如果不告诉我如何做得更好，我不确定包装器是否是解决方案？

这是我的代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/standard2.css" />
</head>
<body>
        <div id="wrapper">
            <nav>
                <ul>
                        <li><a href="index.php">Home</a></li>
                        <li><a href="about.php">About me</a></li>
                        <li><a href="portfolio.php">Portfolio</a></li>
                        <li><a href="contact.php">Contact</a></li>

                </ul>
            </nav>
        </div>
    </body>
</html>

CSS:

#wrapper{
width:1500px;
height:800px;
right:0;
left:0;
margin:0 auto;
background-color: #333333;
}
nav
{
    padding:0;
}

nav li
{
    display:inline;
}

nav li a
{
    font-family:Arial;
    font-size:14px;
    text-decoration: none;
    float:left;
    padding:10px;
    background-color: #333333;
    color:#ffffff;
    border-bottom:1px;
    border-bottom-color:#000000;
    border-bottom-style:solid;
}

nav li a:hover
{
    background-color:#9B1C26;
    padding-bottom:12px;
    border-bottom:2px;
    border-bottom-color:#000000;
    border-bottom-style:solid;
    margin:-1px;
}

最佳答案

如果你想让 wrapper 成为页面的宽度，为什么要将它设置为 px 数字？

你试过吗

#wrapper{
width:100%;
height:800px;
position: absolute;
right:0;
left:0;
background-color: #333333;
}

你还需要

html, body {
width: 100%;
}

因为包装器所在的每个元素也需要具有 100% 的宽度。

关于html - 我的导航栏周围的包装器不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20317920/

25 4 0
文章推荐： javascript - 使用 jQuery 定位特定元素
文章推荐： ios - 如何比较 char/single char 字符串 - 与一些字母表集
文章推荐： jquery - NiceScroll 多卷轴
文章推荐： ios - Objective-c BOOL 总是传递