html - 不确定如何修复 li 元素宽度

Question

我对 css 和 html 很陌生，我正在尝试创建一个下拉菜单，每个下拉菜单有 3 或 4 列链接。我希望列彼此内联。我已经设法做到了这一点，但每列中的链接都在两行或更多行上，我希望它们显示在一行上。

我一直在摆弄 css，但似乎无法弄清楚如何让它们在每个链接上显示在一行上。

在我的 codpen 中，您将看到我正在使用的内容:http://codepen.io/anon/pen/vLQGqM

我能做的最好的就是做

.tlgnav .tlgnav-column {
	
	width: 100%;
  }

，但这会使列相互堆叠，这不是我想要的。

我认为这可能与我的 .tlgnav li 宽度设置为 16.66% 有关，但如果我更改它，我的菜单不会填满屏幕的宽度。

谁能告诉我我做错了什么？

Answer 1

您可以使用 white-space : nowrap 来避免换行，但也许这是更好的方法。我用这个解决方案回答，但如果有人得到更好的东西，请遵循它。

http://codepen.io/anon/pen/BjGzgZ

.tlgnav h3 + ul li {
  white-space:nowrap;
}