如何仅使用 CSS 使 HTML 列表水平显示而不是垂直显示? [英] How to make a HTML list appear horizontally instead of vertically using CSS only?

问题描述

我需要这个是因为我想让菜单(由 HTML 列表组成)水平显示.

我不喜欢使用绝对定位，因为当我开始更改页面布局时它可能会变得混乱.

我还想删除子列表的缩进.可能吗?

解决方案

你将不得不使用类似下面的东西

#menu ul{列表样式:无；}#菜单里{显示:内联；}

<ul><li>第一个菜单项</li><li>第二个菜单项</li><li>第三个菜单项</li>

I need this because I want to make a menu (which is made from a HTML list) appear horizontally.

I prefer not to use absolute positioning since it might become messy when I start changing the layout of the page.

I would like also to remove the indenting of the sub-lists. Is it possible?

解决方案

You will have to use something like below

#menu ul{
  list-style: none;
}
#menu li{
  display: inline;
}
	

<div id="menu">
  <ul>
    <li>First menu item</li>
    <li>Second menu item</li>
    <li>Third menu item</li>
  </ul>
</div>

这篇关于如何仅使用 CSS 使 HTML 列表水平显示而不是垂直显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！