Question

我的包装器没有响应我的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;
}

Answer 1

如果您希望包装器是页面的宽度，为什么将它设置为px numerial？

你试过吗

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

您还需要

html, body {
width: 100%;
}

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

Answer 2

您需要添加css：

nav ul{display:table;width:100%;}
nav ul li{display:table-cell;}

Answer 3

添加这两项更改可以解决问题：

nav {display: inline-block;}
#wrapper {text-align: center;}

见这里：http://jsfiddle.net/FRtZS/ （将包装宽度更改为100％以使其适合屏幕）

我的导航栏周围的包装器无法正常工作

3 个答案: