CSS设置缩进 [英] CSS set li indent

问题描述

Google搜索和搜索堆栈溢出未返回我可以识别的任何结果，请原谅我是否曾经被问过...

Googling and searching stack overflow did not return any results that I could recognize, so forgive me if this has been asked before...

我有一个下拉菜单，它以列表为基础.问题是，列表非常广泛，并且扩展时缩进的距离不够.所以，这是我的问题！如何通过CSS使列表上的缩进量更大?

I have drop down main menu which uses lists as its basis. The problem is, the lists are very wide, and they do not indent far enough when expanded. So, this is my problem! How do I make the indent amount on lists larger via CSS?

推荐答案

要缩进ul下拉菜单，请使用

to indent a ul dropdown menu, use

/* Main Level */
ul{
  margin-left:10px;
}

/* Second Level */
ul ul{
  margin-left:15px;
}

/* Third Level */
ul ul ul{
  margin-left:20px;
}

/* and so on... */

您还可以缩进li和a(或您拥有的任何内容元素)(如果适用)，每个都有不同的效果. 再次根据您想要的效果，也可以使用padding-left代替margin-left.

You can indent the lis and (if applicable) the as (or whatever content elements you have) as well , each with differing effects. You could also use padding-left instead of margin-left, again depending on the effect you want.

更新

默认情况下，许多浏览器使用padding-left设置初始缩进.如果要摆脱它，请设置padding-left: 0px;

By default, many browsers use padding-left to set the initial indentation. If you want to get rid of that, set padding-left: 0px;

仍然，margin-left和padding-left设置都以不同的方式影响列表的缩进. 特别是:margin-left影响元素边界外部的缩进，而padding-left影响元素边界内部的间距. (在此处了解有关CSS盒模型的更多信息)

Still, both margin-left and padding-left settings impact the indentation of lists in different ways. Specifically: margin-left impacts the indentation on the outside of the element's border, whereas padding-left affects the spacing on the inside of the element's border. (Learn more about the CSS box model here)

设置padding-left: 0;会使li的项目符号图标悬挂在元素边框的边缘上(至少在Chrome中是这样)，而这可能不是您想要的.

Setting padding-left: 0; leaves the li's bullet icons hanging over the edge of the element's border (at least in Chrome), which may or may not be what you want.

向左填充和向左填充的示例以及它们如何在ul上协同工作: https://jsfiddle.net/daCrosby/bb7kj8cr/1/

Examples of padding-left vs margin-left and how they can work together on ul: https://jsfiddle.net/daCrosby/bb7kj8cr/1/

这篇关于CSS设置缩进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！