为了账号安全,请及时绑定邮箱和手机立即绑定

怎么把整个导航栏一起向右移动呢

实践的时候想把整个导航栏一起向右移动100PX,但是弄来弄去只弄到每个选项都向右移动100PX,而不是整体不变向右移动。

正在回答

2 回答

不知道你要的什么效果,居中的话可以外面加一层div设置宽度然后margin:0 auto;给你写了个小demo,不知是不是你要的效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nav</title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    #nav_box{margin: 10px auto;width: 900px;}
    ul{width: 500px;margin: 0 auto;}
    ul li{list-style: none;float: left;}
    ul li a{display: block;background-color: #CCC;color: #000;text-decoration: none;padding: 10px 20px;}
    ul li a:hover{background-color: #F80;color: #FFF;}
    </style>
</head>
<body>
<div id="nav_box">
    <ul>
        <li><a href="javascript:;">首页</a></li>
        <li><a href="javascript:;">关于我们</a></li>
        <li><a href="javascript:;">公司简介</a></li>
        <li><a href="javascript:;">行业展示</a></li>
        <li><a href="javascript:;">联系我们</a></li>
    </ul>
</div>
</body>
</html>

关键就是nav_box跟ul的width、margin属性设置

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
导航条菜单的制作
  • 参与学习       123899    人
  • 解答问题       813    个

水平、垂直、圆角导航条菜单,让您的技术探索之路更高效

进入课程

怎么把整个导航栏一起向右移动呢

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信