Question

我正在设计一个需要关闭的导航栏。这是简单的html和css。我正在附上设计。这是设计它应该是： -

这是我目前的设计： -

＆＃13;

<html>
<head>
  <title>Example</title>
  <meta charset="UTF-8" />
</head>

<body>
  <div class="body">
    <div class="header">
      <h1>Home Page</h1>

      <div class="navbar">
        <div>
          <ul class="nav">
            <li class="nav"><a class="nav" href="#">Menu link 1</a></li>
            <li class="nav"><a class="nav" href="#">Menu link 2</a></li>
            <li class="nav"><a class="nav" href="#">Menu link 3</a></li>
            <li class="nav"><a class="nav" href="#">Menu link 4</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

＆＃13;

Answer 1

我会向width:750px和.navbar添加固定margin:0 auto，然后缩小margin-left并删除a.nav的margin-right，例如此处：

＆＃13;

body{
    background-color: #dddddd;
    margin: 0;
                padding: 0;

            }
            h1{
                color:#7ba1cc;
                font-size: 20px;
                margin: 0;
                padding: 0;
            }
            table{margin: 0 auto;
                  margin-top: 20px;
                  width: 70%;
            }
            table, th, td {
                border: 1px solid black;

            }
            .black{
                border-collapse: collapse;
            }

            .body{
                width: 800px;
                height: 1000px;
                margin: 0 auto;
                background-color: #cccccc;

            }
            .header{
                height:115px;
                background-color: #1d8bb3;
            }
            .navbar{
                height:25px;
                padding-top:8px;
                margin-top:57px;  
                border: 1px solid red;
                width: 750px;  
                margin: 0 auto;

            }



            ul.nav, li.nav {
                display:inline-block;
                float: inside;
                margin: 0px;
                padding: 0px;
                
            }


            a.nav {
                background-color: #E2DDDD;
                padding: 8px 50px 8px 50px;
                margin-left: 5px;
                text-decoration: none;
                text-align:center;
            }

            a:hover.nav {
                background-color: #CCC8C8;
            }

＆＃13;

<html>

    <head>
        <title> Homework 2</title>
        <meta charset= "UTF-8">
   </head>

    <body>

        <div class="body">
            <div class="header">
                <h1> Home Page </h1>
                <div class="navbar" >
                    <div>
                        <ul class="nav">
                            <li class="nav"><a class="nav" href="#">Menu link 1</a></li>
                            <li class="nav"><a class="nav" href="#">Menu link 2</a></li>
                            <li class="nav"><a class="nav" href="#">Menu link 3</a></li>
                            <li class="nav"><a class="nav" href="#">Menu link 4</a></li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>

    </body>

</html>

＆＃13;

Answer 2

从＆＃34;删除NAV＆＃34;保证金风格：

margin-left: 15px;
margin-right: 2px;

这是您的新导航栏类

.navbar {
    height: 28px;
    padding-top: 7px;
    margin-top: 54px;
    border: 1px solid #F00;
}

和示例：https://jsfiddle.net/sqhaqcoo/1/

将按钮宽度更改padding: 8px 50px;减少为padding: 8px 40px;

导航条紧密

2 个答案: