【问题标题】:How do I make a vertical list go across horizontally?如何使垂直列表水平穿过?
【发布时间】:2014-10-08 15:44:06
【问题描述】:

我正在通过 Cargo Collective 制作一个投资组合。我正在使用他们的预制主题之一,但已根据自己的喜好对其进行了定制。我试图弄清楚如何做的最后一件事是将这组垂直链接对齐到水平。

该网站目前看起来像this

This 是我用我想要的东西制作的模型,我试图让它看起来像。

谢谢大家!

【问题讨论】:

  • Here 是网站上当前 CSS 的链接。
  • 您应该在问题中提供 HTML 和 CSS。但是请考虑在您的 <li> 元素上使用 display: inline-block;
  • 使用属性“display:inline-block”来实现这个!!
  • @Ruddy 它只会让我插入两个链接,所以我留下了 CSS 的评论(见上文)。 display: inline-block; 当前已插入,但没有任何改变..
  • @davidsmith 您应该取出相关的 CSS 和 HTML,创建一个 JsFiddle 并将链接提供给我们。这将使您更快地获得帮助。如果你这样做,我会看看它。

标签: html css list header alignment


【解决方案1】:

删除margin: 650px; 上的.navigation a。将float: right; 添加到您的ul 中,并使用边距来正确处理。

【讨论】:

  • 这似乎破坏了链接。我在.navigation span { 中添加了一个display: table-cell;,这似乎使它们水平对齐,但现在我需要将整个东西对齐到最右边和标题的底部......那里有什么建议吗?
  • 是的,那是因为你有一个边距:650px;在您的 .navigation 上删除它并改为浮动你的 ul 并在那里添加一些边距。我会更新我的答案。
猜你喜欢
  • 1970-01-01
  • 2020-01-18
  • 2022-06-11
  • 2011-04-19
  • 2012-04-21
  • 1970-01-01
  • 2020-12-26
  • 1970-01-01
  • 2011-02-08
相关资源
最近更新 更多