用CSS写怎样才能控制Li里面的文字排成这样 如图

html-css015

用CSS写怎样才能控制Li里面的文字排成这样 如图,第1张

设置li标签的宽度，然后在每个li里设他们的padding-left（内边距） 这是我能想到最简单的办法了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style>

li{list-style:none

line-height:2em

text-decoration:none

width:200px

}

</style>

</head>

<body>

<ul style="text-indent:2em">

<li style="padding-left:0px">just simple</li>

<li style="padding-left:20px">just simple</li>

<li style="padding-left:40px">just simple</li>

<li style="padding-left:60px">just simple</li>

<li style="padding-left:40px">just simple</li>

<li style="padding-left:20px">just simple</li>

<li style="padding-left:0px">just simple</li>

</ul>

</body>

</html>

这是全部的代码 样式跟你的一样 字体自己改吧

li内的文字变成竖向了，可以通过css对LI的样式进行定义和修改：

1、给Li设置浮动。加上 float:left

2、对LI设置好相应的宽度width和高度height

3、通过overflow:hidden对超出li宽度的隐藏

相应代码为：

li{float:leftwidth:200pxheight:30pxline-height:30pxoverflow:hidden}

css控制第一个li标签的样式，和其他li的样式不同：给第一个<li>标签添加class或者id，然后编写css代码。

html：给第一个li元素添加一个class类名为“menu1”。

html：

<ul>

<li class=“menu1”>新闻一</li>

<li>新闻二</li>

<li>新闻三</li>

</ul>

css代码：

li{font-size：14px；} //4px大小的字体

.menu1{font-size:18pxfont-weight：bold；} //字体样式：粗体18px字体

效果：