div里的列表问题
发布网友
发布时间：2023-01-06 14:27
共5个回答
热心网友
时间：2023-10-18 16:33
<html>
<head>
<title>无标题文档</title>
<style>
a:link
{
color:#000;
text-decoration:none;
}
a:visited
{
color:#000;
text-decoration:none;
}
a:hover
{
color:#33FF00;
text-decoration:underline;
}
a:active
{
color:#000;
text-decoration:none;
}
ul,li
{
list-style-type:none;
margin:0;
padding:0;
}
.jiezi
{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
div
{
width:500px;
height:200px;
background:#cccccc;
font-size:12px;
}
div ul
{
line-height:26px;
}
div li
{
float:left;
display:inline;
}
div li.name
{
background:url(images/item.gif) no-repeat 5px 8px;
padding:0 15px;
width:370px;
}
div li.time
{
color:#666666;
width:90px;
text-align:center;
}
</style>
</head>
<body>
<div>
<ul>
<li class="name jiezi"><a href="#">江苏省常州市科技局来合肥科创中心进行专题调研江苏省常州市科技局来合肥科创中心进行专题调研</a>
<li class="time">2009-03-12</li>
</ul>
<ul>
<li class="name jiezi"><a href="#">江苏省常州市科进行专题调研</a>
<li class="time">2009-03-12</li>
</ul>
<ul>
<li class="name jiezi"><a href="#">江苏省常州市科技局来合肥科创中心进</a>
<li class="time">2009-03-12</li>
</ul>
<ul>
<li class="name jiezi"><a href="#">江苏省常州市科技局来合肥科创中心进行专题调研江苏省常州市科技局来合肥科创中心进行专题调研</a>
<li class="time">2009-03-12</li>
</ul>
<ul>
<li class="name jiezi"><a href="#">江苏省常州市科技局来合肥科创中心进行专题调研江苏省常州市科技局来合肥科创中心进行专题调研</a>
<li class="time">2009-03-12</li>
</ul>
</div>
</body>
</html>
注:
item.gif是新闻图标
.jiezi是超过宽度,截字功能
效果如下图,祝你成功!
热心网友
时间：2023-10-18 16:33
<li>新闻列表1</li>
<li>新闻列表2</li>
<li>新闻列表3</li>
<li>新闻列表4</li>
</ul>
热心网友
时间：2023-10-18 16:33
<dt>新闻列表</dt>
<dd>新闻1</dd>
<dd>新闻2</dd>
</dl>
热心网友
时间：2023-10-18 16:34
<li><a href="">新闻列表</a></li>
</ul>
也可以用
<ol>
<li><a href="">新闻列表</a></li>
</ol>
参考资料：<li
热心网友
时间：2023-10-18 16:35
{
}
li
{
}
