Question

一切看起来都很棒，或者至少是我想要的方式。但感觉我正在错误地使用边距来实现这种外观。这是最好的方式还是有更直观的解决方案？

http://i.imgur.com/Mcme35H.jpg

 <div class="navbar-header">
      <h1>HHHHH HHHH</h1>
    </div>
    <div id="header">
      <nav id="nav">                          
        <a href="index.php">Home</a>
        <a href="services.php">Services</a>
        <a href="contact.php">Contact</a>
        <a href="Request.php">Request service</a>              
      </nav>
    </div><!--/#HEADER-->

的CSS

 .navbar-header>h1{
            float:left;
            margin:10px 414px 0px 20px;
            font-size: 38px;    
            color:#ffe;
            transition: all 0.3s ;
        }

        .navbar-header>h1:hover{
            color:#4EB1BA;
        }

        #nav{
            margin-top: 30px;
        }


        #nav>a{ 
            text-decoration: none;
            margin-left:30px;
            margin:51px 0px 30px 30px;
            color:#E9E9E9;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        #nav>a:hover{
            color:#4eb1ba;  
        }

Answer 1

我确实有一些建议可以帮助清理代码。可以在将来制作更清晰的编码。

我知道您如何将margin:10px 414px 0px 20px;应用于<h1>标记。我建议您将其更改为margin:10px 0 0 20px;，只需将float:right添加到页面上的#nav ID即可。这将允许在需要时更改标题或者应用新的字体，并且不会影响导航部分的位置。您需要做的就是将您的nar的余量更改为#nav { margin:30px 20px 0; }。

也许将来您可以使用<header></header>代码而不是id="header"。真的以同样的方式工作，但只是更清洁的代码。

希望这可以帮助你。

我在引导程序导航中正确使用了边距

1 个答案: