如何在左侧制作带有徽标的单杠

Question

我目前正在编写自己的网站，但导航栏有问题。 我正在尝试制作一个小的导航栏，左侧是我的徽标，右侧是超链接，但无论我做什么，结果要么是徽标放错了位置，超链接位于徽标顶部，要么是徽标是放在我想要的地方，但超链接没有。 提前致谢。

 body{ margin: 0; padding: 0; background-color:#000000; } p, a, h1, h2, h3, h4, h5, h6, ul{ color:#ffffff; } #topbar{ height: 50px; background-color: #242424; width:100%; display:block; } #tb_hyperlink{ display:inline; left:0; } ul{ display:inline-block; list-style: none; position:fixed; } li{ display: inline; cursor: pointer; padding: 20px; margin-left: 1px; } a{ text-decoration: none; } #space{ padding: 0 10px; }

 <div id="topbar"> > <div id="tb_logo"> <a href="https://acrazytown.com"> <img src="logo_small.png"/> </a> <ul id="tb_hyperlink"> <li><a href="https://acrazytown.com/">HOME</a></li> <li class="space">|</li> <li><a href="https://acrazytown.com/my-projects">MY PROJECTS</a></li> <li class="space">|</li> <li><a href="https://acrazytown.com/news/">NEWS</a></li> <li class="space">|</li> <li><a href="https://status.acrazytown.com/">STATUS</a></li> <li class="space">|</li> <li><a href="https://acrazytown.com/contact">CONTACT</a></li> </ul> </div> </div>

Answer 1

下面是使用 css 的不同代码执行此操作的代码

我已经评论了一些代码使用，您也更喜欢最好的使用宽度。

 body{ margin: 0; padding: 0; background-color:#000000; } p, a, h1, h2, h3, h4, h5, h6, ul{ color:#ffffff; } #topbar{ background-color: #242424; width:100%; position: fixed; z-index: 99; } ul{ list-style: none; margin: 0; } li{ display: inline-block; cursor: pointer; padding: 10px 10px; font-size:14px; } a{ text-decoration: none; display:inline-block } div#tb_logo { height: 50px; } #space{ padding: 0 10px; } /* Style 1 Using Flex*/ #topbar{ display: flex; align-items: center; justify-content: space-between; flex-wrap:nowrap; } /*Style 2 #tb_logo, #tb_hyperlink { display: inline-block; } */ /*Style 3 div#tb_logo { float: left; } #tb_hyperlink { float: right; padding-top: 20px; } */

 <div id="topbar"> <div id="tb_logo"> <a href="https://acrazytown.com"> <img src="https://via.placeholder.com/100x50" title="Logo" /> </a> </div> <ul id="tb_hyperlink"> <li><a href="https://acrazytown.com/">HOME</a></li> <li class="space">|</li> <li><a href="https://acrazytown.com/my-projects">MY PROJECTS</a></li> <li class="space">|</li> <li><a href="https://acrazytown.com/news/">NEWS</a></li> <li class="space">|</li> <li><a href="https://status.acrazytown.com/">STATUS</a></li> <li class="space">|</li> <li><a href="https://acrazytown.com/contact">CONTACT</a></li> </ul> </div>

Answer 2

您使用#id和带有.class的 id 来控制类。 将#space更改为.space ，它看起来像这样：

 body{ margin: 0; padding: 0; background-color:#000000; } p, a, h1, h2, h3, h4, h5, h6, ul{ color:#ffffff; } #topbar{ height: 50px; background-color: #242424; width:100%; display:block; } #tb_hyperlink{ display:inline; left:0; } ul{ display:inline-block; list-style: none; position:fixed; } li{ display: inline; cursor: pointer; padding: 20px; margin-left: 1px; } a{ text-decoration: none; }.space{ padding: 0 10px; }

 <div id="topbar"> <div id="tb_logo"> <a href="https://acrazytown.com"> <img src="logo_small.png"/> </a> <ul id="tb_hyperlink"> <li><a href="https://acrazytown.com/">HOME</a></li> <li class="space">|</li> <li><a href="https://acrazytown.com/my-projects">MY PROJECTS</a></li> <li class="space">|</li> <li><a href="https://acrazytown.com/news/">NEWS</a></li> <li class="space">|</li> <li><a href="https://status.acrazytown.com/">STATUS</a></li> <li class="space">|</li> <li><a href="https://acrazytown.com/contact">CONTACT</a></li> </ul> </div> </div>

另外，请尝试通过以美观的方式格式化您的代码来帮助自己和他人。 不要只是在行前乱扔制表符和空格。

Answer 3

<div id="topbar">
 <ul id="tb_hyperlink">  
            <a href="https://acrazytown.com">
    <img src="logo_small.png">
   </a><li><a href="https://acrazytown.com/">HOME</a></li>
            <li class="space">|</li>
            <li><a href="https://acrazytown.com/my-projects">MY PROJECTS</a></li>
            <li class="space">|</li>
            <li><a href="https://acrazytown.com/news/">NEWS</a></li>
            <li class="space">|</li>
            <li><a href="https://status.acrazytown.com/">STATUS</a></li>
            <li class="space">|</li>
            <li><a href="https://acrazytown.com/contact">CONTACT</a></li>
    </ul>
</div>

CSS

body{
    margin: 0;
    padding: 0;
    background-color:#000000;
}
p, a, h1, h2, h3, h4, h5, h6, ul{
    color:#ffffff;
}
#topbar {
    height: 50px;
    background-color: 
    #242424;
    width: 100%;
    display: block;
}
#tb_hyperlink{
    display:inline;
    left:0;
  }
ul {
    display: inline-block;
    padding-left: 0;

}
li {
    display: inline;
    cursor: pointer;
    padding: 10px;
    margin-left: 1px;
    font-size: 14px;
}
a{
  text-decoration: none;
  }  

#space{
    padding: 0 10px;
  }