为什么我的导航栏不会水平显示浮动？

Question

我是编码新手，想弄清楚为什么我的导航栏不会水平显示？我已经尝试了一些我在下面的代码中注意到的事情。

这里的问题是，我必须使用浮动而不是 flexbox。

header nav>* {
  float: left;
  width: 7%;
  margin: 0 5%;
  padding-bottom: 30px;
  list-style: none;
  text-decoration: none;
}

header nav ul li {
  width: 100px;
  float: right;
  display: block;
  text-decoration: none;
  /*margin-left: 2px;
  display: inline; not working*/
}

<header>
  <nav>
    <a href="#">Courses</a>
    <form action="">
      <input type="text" placeholder="Search">
    </form>
    <img class="icon" src="#">
    <h2>Tech Academy</h2>
    <ul id="SideBar">
      <li><a href="#">Donate</a></li>
      <li><a href="#">Login</a></li>
      <li><a href="#">Sign up</a></li>
    </ul>
  </nav>
</header>

我已经尝试将特异性更改为 class 或 id，但没有解决任何问题。我还应该注意到 'text-decoration' 对 li 不起作用，但对 a 'courses' 起作用？ * border: box-sizing 也在顶部 css sheet.

This is what it looks like on the browser

我对编码还很陌生，这个问题让我困惑了几个小时。 T

Answer 1

您可以使用 flexbox 将它们排列成 column 或 row。声明 display: flex; 应该应用你正在尝试做的事情。请参阅下面的代码段：

header nav>* {
  float: left;
  width: 7%;
  margin: 0 5%;
  padding-bottom: 30px;
  list-style: none;
  text-decoration: none;
}

header nav ul li {
  width: 100px;
  float: right;
  display: block;
  text-decoration: none;
  /*margin-left: 2px;
  display: inline; not working*/
}

#SideBar{
  display: flex;
  gap: 5px;
}

<header>
  <nav>
    <a href="#">Courses</a>
    <form action="">
      <input type="text" placeholder="Search">
    </form>
    <img class="icon" src="#">
    <h2>Tech Academy</h2>
    <ul id="SideBar">
      <li><a href="#">Donate</a></li>
      <li><a href="#">Login</a></li>
      <li><a href="#">Sign up</a></li>
    </ul>
  </nav>
</header>

更多关于 flexbox here。

Answer 2

header nav>* {
  float: left;
  /*width: 7%;*/
  margin: 0 5%;
  padding-bottom: 30px;
  list-style: none;
  text-decoration: none;
}

header nav ul li{
 width: 100px;
 float: right;
 /*display: block;*/
 text-decoration: none;
 margin-left: 2px;
 display: inline;
}

<header>
<nav>

<h2>Tech Academy</h2>
          
<ul id="SideBar">
<li><a href="#">Donate</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Sign up</a></li>
</ul>
  
</nav>
</header>

问题

你用过width: 7%;到header nav>*

奇怪的

奇怪的是你同时使用了 display: block; 和 display: inline;

解决方案

我评论了问题和奇怪的问题，运行它应该工作的片段

Answer 3

在css上使用这个......

#SideBar{
display: flex;
}

Answer 4

首先，html 文件中属性之间的间距对浏览器显示完全没有影响，css 文件中的间距也是如此。

第二件事，我不确定你为什么不想使用 flex（这里很方便——你将父属性 (ul) 的显示设置为 display: flex; flex-direction: row;，它会执行把戏）。

但是如果你不想用它，还有2个技巧：

#1

ul {
    display: contents; /* this will make the parent act like it doesn't exist - and then do whatever you want with the children*/
}

li {
    display: inline-block;
}

<ul id="SideBar">
    <li><a href="#">Donate</a></li>
    <li><a href="#">Login</a></li>
    <li><a href="#">Sign up</a></li>  
</ul>

#2 网格

ul {
    display: grid;
    grid-template-columns: max-content max-content max-content; /*instaed of max-content, you can assign the width you want for each li*/
}


li {
    margin : 5px;
    list-style: none;
}

<ul id="SideBar">
    <li><a href="#">Donate</a></li>
    <li><a href="#">Login</a></li>
    <li><a href="#">Sign up</a></li>  
</ul>

为什么我的导航栏不会水平显示浮动？

Why won't my nav lis display horizontally with floats?

html

css

css-float

问题

奇怪的

解决方案