css样式怎样设置 <ul><ul>标签中li内容居中左对齐？

html-css010

css样式怎样设置 <ul><ul>标签中li内容居中左对齐？,第1张

居中:text-align:center( 而默认就是左对齐的)，

再设置：text-align:left

代码如下：

.box｛text-align:center；text-align:left｝

<ul class=“box”>

<li>内容1</li>

<li>内容2</li>

<li>内容3</li>

</ul>

只要消除<ul>元素的内边距的上边距即可，例如

ul{ padding:0 20px} /*设置ul元素上下内边距为0，左右内边距20px*/

示例如下：

创建Html元素

<ul>

<li>itemlist 1</li>

<li>itemlist 2</li>

<li>itemlist 3</li>

</ul

设置css样式

ul{width:100pxpadding:0 20pxborder:4px solid #bebceb

观察显示效果

1、在ul样式中设置文本居左对齐。

ul {

padding:0

margin:0

text-align: left

list-style-type: none

}

2、标签大小不同，可以用自定义的背景图片代替标签样式。

ul li

{

background-image:url(sqpurple.gif)

background-repeat:no-repeat

background-position:0px 5px

padding-left:14px

}

扩展资料：

控制ul下具体的li:

1、ul li:first-child{ }

第一个li

2、ul li:last-child{ }

最后一个li

3、ul li:nth-child(4){ }

指定第几个,4就是代表第四个li

4、ul li:nth-child(2n+1){background:red}

匹配第1、第3、第5、…个li

5、ul li:nth-child(odd){background:red}

奇数的li

6、ul li:nth-child(even){background:red}

偶数的li