CSS:我的所有项目都相互重叠,我该如何修复它?

问题描述 投票:0回答:1

很紧急。我需要你的帮助。请帮助我。

我试图将我所有的东西都放在一行中,但我做不到。如何将所有内容放在导航栏中的一行中?我应该在我的 css 代码中添加什么或者如何解决这个问题。但现在他们都在彼此之上

          [Codepen]     (https://codepen.io/burhanelaldi/pen/GRPxxRx)

我尝试创建一个导航栏

我尝试创建一个导航栏

javascript html css git coding-style
1个回答
0
投票

完全不确定你在问什么,但如果你想让你的流程水平,那么只需添加

display: flex
,如下所示。

nav {
  display: flex;
  background-color: #333;
  text-align: center;
  list-style-type: none; /* i removed to list bullets */
}

附注您不需要在代码笔中添加 html、body、head 标签等,它应该只是 body 标签的内容。

<!--  I define the <nav> tag in the <body> tag where i want to make the bar -->
<nav 
  <ul> <!-- I define the <ul> tag, which is used to show the unordered list. And, then i define the list items in the <li> tag. I define those items which i want to show in the navigation bar. They are gonna go to href -->
    <li><a href="#home">Home</a></li>
    <li><a href="#history">History</a></li>
    <li><a href="#strategies">Strategies</a></li>
    <li><a href="#myGame">My Game</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
<!--  I gave each anchor tag a corresponding div. When we click on the nav bar we are gonna go to those ids -->
<div id="home">Home</div>
<div id="history">History</div>
<div id="strategies">Strategies</div>
<div id="myGame">My Game</div>
<div id="contact">Contact</div>
© www.soinside.com 2019 - 2024. All rights reserved.