问一个overflow：hidden的问题

SmallTigerWeskit 2010-03-24 05:11:38

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

<head runat="server">

    <title></title>

    <style type="text/css">

        .ico3

        {

            width: 352px;

            padding-right: 0px;

            padding-left: 0px;

            padding-bottom: 4px;

            padding-top: 4px;

        }

        .ico3 li

        {

            overflow: ==hidden;padding:4px0;background:url("../images/ico-3.gif")no-repeatscroll7px11pxtransparent;padding-left:16px;}</style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <ul class="ico3">

            <li><span class="date">[<a href="/html/exam/6/">等级考试</a>]</span><a href="/html/exam/6/200909/1511727.html"

                title="2009年全国计算机等级考试四级软件测试工程师考试大纲">2009年全国计算机等级考试四级软件测试工程师考试大纲 </a></li>

            <li><span class="date">[<a href="/html/exam/6/">等级考试</a>]</span><a href="/html/exam/6/200909/1511727.html"

                title="2009年全国计算机等级考试四级软件测试工程师考试大纲">2009年全国计算机等级考试四级软件测试工程师考试大纲</a></li><li><span

                    class="date">[<a href="/html/exam/6/">等级考试</a>]</span><a href="/html/exam/6/200909/1511727.html"

                        title="2009年全国计算机等级考试四级软件测试工程师考试大纲">2009年全国计算机等级考试四级软件测试工程师考试大纲</a></li><li><span

                            class="date">[<a href="/html/exam/6/">等级考试</a>]</span><a href="/html/exam/6/200909/1511727.html"

                                title="2009年全国计算机等级考试四级软件测试工程师考试大纲">2009年全国计算机等级考试四级软件测试工程师考试大纲</a></li><li><span

                                    class="date">[<a href="/html/exam/6/">等级考试</a>]</span><a href="/html/exam/6/200909/1511727.html"

                                        title="2009年全国计算机等级考试四级软件测试工程师考试大纲">2009年全国计算机等级考试四级软件测试工程师考试大纲</a></li><li><span

                                            class="date">[<a href="/html/exam/6/">等级考试</a>]</span><a href="/html/exam/6/200909/1511727.html"

                                                title="2009年全国计算机等级考试四级软件测试工程师考试大纲">2009年全国计算机等级考试四级软件测试工程师考试大纲</a></li>

        </ul>

    </div>

    </form>

</body>

</html>

就是，这里面没个li元素不换行了吗，对吧。

我不想换行，就每个li只显示一行，超出的字就不显示了，显示到试四级软件

测试工程师考试大纲就不显示了。。

样式怎么老是调不出来，帮下忙

...全文

93 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhangshunzhong 2010-03-25

打赏
举报

overflow要和width同时设置的，在父元素里只设置了width不设置overflow，在子元素里只设置了overflow不设置width，都不会有效果

zhangshunzhong 2010-03-25

打赏
举报

你需要在li里设置强制不换行，在ul里设置溢出截断：

.ico3
{
overflow:hidden;
width: 352px;
}
.ico3 li
{white-space:nowrap;}

艾思软件-app开发公司 2010-03-25

打赏
举报

我负责的说,我测试了.除非我理解错了

xiamin8 2010-03-24

打赏
举报

<!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/html; charset=gb2312" />
<title></title>
<style type="text/css">
ul,li{ padding:0px; margin:0px; list-style:none;font-size:12px; line-height:100%;}
.ico3{ width: 352px; padding:4px 0px;}
.ico3 li{ overflow: hidden; width:360px;background:#f00; vertical-align:bottom; padding:4px;padding-left:16px;}</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul class="ico3">
<li><span class="date">[<a href="/html/exam/6/">等级考试</a>]</span><a href="/html/exam/6/200909/1511727.html"
title="2009年全国计算机等级考试四级软件测试工程师考试大纲">2009年全国计算机等级考试四级软件测试工程师考试大纲 </a></li>
<li><span class="date">[<a href="/html/exam/6/">等级考试</a>]</span><a href="/html/exam/6/200909/1511727.html"
title="2009年全国计算机等级考试四级软件测试工程师考试大纲">2009年全国计算机等级考试四级软件测试工程师考试大纲</a></li> <li><span class="date">[<a href="/html/exam/6/">等级考试</a>]</span><a href="/html/exam/6/200909/1511727.html"
title="2009年全国计算机等级考试四级软件测试工程师考试大纲">2009年全国计算机等级考试四级软件测试工程师考试大纲</a></li>
<li><span class="date">[<a href="/html/exam/6/">等级考试</a>]</span><a href="/html/exam/6/200909/1511727.html"
title="2009年全国计算机等级考试四级软件测试工程师考试大纲">2009年全国计算机等级考试四级软件测试工程师考试大纲</a></li>
<li><span class="date">[<a href="/html/exam/6/">等级考试</a>]</span><a href="/html/exam/6/200909/1511727.html"
title="2009年全国计算机等级考试四级软件测试工程师考试大纲">2009年全国计算机等级考试四级软件测试工程师考试大纲</a></li><li><span
class="date">[<a href="/html/exam/6/">等级考试</a>]</span><a href="/html/exam/6/200909/1511727.html"
title="2009年全国计算机等级考试四级软件测试工程师考试大纲">2009年全国计算机等级考试四级软件测试工程师考试大纲</a></li>
</ul>
</div>
</form>
</body>
</html>
对li要设置宽度和高度，最好写上DOCTYPE声明

ddcatlee 2010-03-24

打赏
举报

li {white-space:nowrap;}

SmallTigerWeskit 2010-03-24

打赏
举报

请问有测试下不？

shuxin860425 2010-03-24

打赏
举报

把其中的CSS改成这样就好了
.ico3 li
{
width: 150px;_height: 22px;min-height: 18px;max-height: 18px;overflow: hidden;margin-bottom: 5px;padding:4px0;background:url("../images/ico-3.gif")no-repeat 7px 11px;padding-left:16px;}

艾思软件-app开发公司 2010-03-24