个人中心
gpt4 book ai didi

html - 无法将我的导航栏居中

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

我的导航栏有以下代码，但似乎无法将其置于网站中心。我究竟做错了什么？移除 float: left 对定位没有任何作用。谢谢。

CSS

ul#list-nav {
    list-style: none;
    margin: 20px auto;
    padding: 0px;
    width: 800px;
}

ul#list-nav li {
    display: inline;
}

ul#list-nav li a {
    text-decoration: none;
    padding: 5px 0;
    width: 100px;
    float: left;
    background: #485e49;
    color: #eee;
    text-align: center;
    border-left: 1px solid #fff;
}

ul#list-nav li a:hover {
    background: #a2b3a1;
    color: #000
}

html

</head>
<body>
    <div id="as">
        <ul id="list-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
    </div>
</body>

最佳答案

它已经居中，只是您为菜单使用了显式宽度，因此请考虑减小菜单宽度

Demo

CSS

ul#list-nav {
  list-style:none;
  margin:20px auto;
  padding:0px;
  width:800px;
  border: 1px solid #ff0000;
  overflow: hidden;
}

目前我已经做到了 205px

CSS

ul#list-nav {
  list-style:none;
  margin:20px auto;
  padding:0px;
  width:205px;
  border: 1px solid #ff0000;
  overflow: hidden;
}

Fixed demo

关于html - 无法将我的导航栏居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13438025/

25 4 0
文章推荐： ios - 如果我实现 decidePolicyFor navigationAction，WKWebView 为空，如果我删除该功能，则正确加载
文章推荐： javascript - 按值对对象进行排序并获取键作为 JavaScript 中的输出
文章推荐： html - 三列层对齐
文章推荐： swift - 在 iOS 应用程序中查找文件