HTML5 水平导航

Question

我不得不说我是 Stack Overflow 和 HTML5 的新手。我的主要语言不是英语。学习母语以外的其他语言非常困难，除了像 'what is head, how to use paragraphs' 这样的基础知识，我没有找到任何 HTML 帮助，所以我不得不使用我在互联网。我最终需要一点帮助。

我的问题是我需要将下面的垂直菜单转换为水平菜单。

菜单代码如下：

* {
  margin: 0;
  padding: 0;
}
body {
  background: #333;
}
ul {
  background: white;
  border-top: 6px solid hsl(180, 40%, 60%);
  width: 200px;
  margin: 0 auto;
  font-size: 0;
}
ul li {
  list-style-type: none;
  position: relative;
  overflow: hidden;
  font-size: inherit;
  float: left;
}
ul li a {
  font: normal 14px/28px Ubuntu;
  color: hsl(180, 40%, 40%);
  display: inline-block;
  padding: 10px 15px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.ink {
  display: block;
  position: absolute;
  background: hsl(180, 40%, 80%);
  border-radius: 100%;
  transform: scale(0);
}
.ink.animate {
  animation: ripple 0.65s linear;
}
@keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

<ul>
    <li><a>23432222</a></li>
    <li><a>444444</a></li>
    <li><a>Sample Text</a></li>
    <li><a>342123443</a></li>
</ul>

如果能提供任何帮助，我将不胜感激，对于提出一些愚蠢的问题，我深表歉意，我只是不知道在哪里可以找到答案。

Answer 1

下面是菜单的水平工作版本。我做的主要事情是将 ul 和 li 上的 display 更改为 inline-block。这使得它们彼此相邻排列，而不是彼此重叠。然后我从 ul 中删除了 width: 200px （这导致 li 元素换行），并在 body 上设置 text-align: center 以获得菜单 ul居中。

工作现场演示：

* {
    margin: 0;
    padding: 0;
}
body {
    background: #333;
    text-align: center;
}
ul {
    display: inline-block;
    background: white;
    border-top: 6px solid hsl(180, 40%, 60%);
    margin: 0 auto;
    font-size: 0;
}
ul li {
    display: inline-block;
    position: relative;
    overflow: hidden;
    font-size: inherit;
}
ul li a {
    font: normal 14px/28px Ubuntu;
    color: hsl(180, 40%, 40%);
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    position: relative;
}
.ink {
    display: block;
    position: absolute;
    background: hsl(180, 40%, 80%);
    border-radius: 100%;
    transform: scale(0);
}
.ink.animate {
    animation: ripple 0.65s linear;
}
@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

<ul>
    <li><a>23432222</a>
    </li>
    <li><a>444444</a>
    </li>
    <li><a>Sample Text</a>
    </li>
    <li><a>342123443</a>
    </li>
</ul>

JSFiddle 版本：https://jsfiddle.net/wd51zgog/

Answer 2

一种使所有链接内联（水平）的简单方法是使用 CSS 属性 display: inline block;

nav li { 
 display: inline-block;
}

导航是用于导航的导航标签：

<nav>
    <ul>
      <li><a>23432222</a></li>
      <li><a>444444</a></li>
      <li><a>Sample Text</a></li>
      <li><a>342123443</a></li>
    </ul>
  </nav>

HTML5 水平导航

Horizontal Nav in HTML5

html

css

html-lists