Question

我不得不说我是Stack Overflow和HTML5的新手。我的主要语言不是英语。学习用我母语以外的其他语言学习的东西是非常困难的，除了基本知识之外我没有找到任何HTML帮助，比如什么是头，如何使用段落，所以我不得不我在互联网上找到的适当代码。我最终需要一些帮助。

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

以下是菜单的代码：

＆＃13;

* {
  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);
  }
}

＆＃13;

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

＆＃13;

我会感谢任何帮助，抱歉发布有点愚蠢的问题，我只是不知道在哪里可以找到答案。

Answer 1

下面是菜单的工作水平版本。我做的主要事情是将display和ul上的li更改为inline-block。这使得它们彼此相邻而不是彼此重叠。然后，我从width: 200px移除ul（这导致li元素换行），并在正文上设置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中的水平导航

2 个答案: