Question

我最近制作了一个垂直导航栏，想知道如何将其水平放置并在等大小的等距间隔的框中显示

我试图将文本向左浮动，但是效果不如W3 School关于创建水平导航栏的教程要好。 W3 School没有用。我是HTML和CSS新手。

x_p = 4

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  width: 100px;
  border: 1px solid;
}

li a {
  display: block;
  color: #000000;
  padding: 8px 16px;
  text-decoration: none; 
  text-align: center;
  border: 1px;
  border-bottom: 1px solid;
}

li:last-child a {
  border-bottom: none; 
}

li a:hover {
  background-color:red;
  color:white; 
}

我希望水平导航栏居中，并在出现的相同大小的框中等距分布。

Answer 1

开始更改显示属性，然后将其添加到li元素中，如以下代码片段所示。您必须使用值和属性才能实现所需的功能。

ul {
  font-size: 0;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  border: 1px solid;
}
ul li {
  display: inline-block;
  list-style-type: none;
  width: 20%;
  font-size: 1rem;
}
li a {
  color: #000000;
  padding: 8px 16px;
  text-decoration: none; 
  text-align: center;
  border: 1px;
  border-bottom: 1px solid;
}

li:last-child a {
  border-bottom: none; 
}

li a:hover {
  background-color:red;
  color:white; 
}

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="services.html">Services</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="#">LinkedIn</a></li>
</ul>

Answer 2

使用flex。您可以详细了解here。

ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px;
  padding: 0px;
  width: 400px;
  border: 1px solid;
}

li a {
  display: block;
  color: #000000;
  padding: 8px 16px;
  text-decoration: none;
  text-align: center;
  border: 1px;
  border-bottom: 1px solid;
}

li:last-child a {
  border-bottom: none;
}

li a:hover {
  background-color: red;
  color: white;
}

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="services.html">Services</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="#">LinkedIn</a></li>
</ul>

如何使垂直导航栏变为水平

2 个答案: