问答详情
源自:3-14 编程练习

列表溢出问题,以及项目图片和文字不在一水平线

<!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>3.10新闻中心制作评测题</title>

<style type="text/css">


/*在此定义相关CSS样式*/

.topList{

    width:300px;

    height:180px;

    border:1px solid #e8e8e8;

    margin:0 auto;

}


ul{

    list-style-type:none;

    padding:5px;

    font-size:12px;

    margin-top:-15px;

}

em{

    width:20px;

    height:16px;

    text-align:center;

    line-height:16px;

    font-style:normal;

    color:#333;

    background-image:url(http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg);

    background-position:bottom;

    display:block;

    float:left;

}


.top em{

    background-image:url(http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg);

    background-position:top;

    color:#fff;

}

a:link,a:visited{

    text-decoration:none;

    color:#888;

}

a:hover,a:active{

    color:#f00;

}

p{

    line-height:20px;

}


</style>

</head>


<body>

<div class="topList">

<ul>

<li class="top"><em>01</em>

<p><a href="http://www.imooc.com/" >【慕客访谈用户篇】“有为屌丝”在路上</a></p>

</li>

<li class="top"><em>02</em>

<p><a href="http://www.imooc.com/">【有奖活动】给父亲的三行书信</a></p>

</li>

<li class="top"><em>03</em>

<p><a href="http://www.imooc.com/">《程序猿,请晒出你的童年》活动获奖公告</a></p>

</li>

<li><em>04</em>

<p><a href="http://www.imooc.com/">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></p>

</li>

<li><em>05</em>

<p><a href="http://www.imooc.com/">【获奖公告】追“球”巅峰,争当“预言帝”</a></p>

</li>

<li><em>06</em>

<p><a href="http://www.imooc.com/">【问卷调查】慕课网用户学习情况大调查</a></p>

</li>

</ul>

</div>

</body>

56d4306a0001c7de03220195.jpg

上图为例子


56d4306a0001c4af05000293.jpg

上图为我写的代码成像。

写完代码后,发现p标签中的文字和左边的项目符号背景图不在一水平线上,使用line-height来保持一水平线,但是列表就溢出topList

于是,使用margin的负值。

但总觉得这样的方法不好,求指教

提问者:Kitayama 2016-02-29 19:52
微课

个回答

  • 680360aini
    2016-08-15 16:54:45

    将p设置左浮动

  • 慕的地8436510
    2016-03-28 15:44:48

    *{

        padding:0;

        margin:0;

        }

    .topList{

        width:300px;

        height:180px;

        border:1px solid #e8e8e8;

        margin:5px auto;

    }

    ul{

        list-style:none;

        padding:5px;

    }

    ul li{

       height:30px; 

    }

    a{

        text-decoration:none;

        font-size:12px;

    }

    a:link,a:visited{

        color:#333;

    }

    a:hover,a:active{

        color:red;

    }

    em{   

        width:20px;

        height:16px;

        text-align:center;

        font-style:normal;

        color:#000;

        background:url(http://img.imooc.com/53cf0fa20001d3dc00200032.jpg);

        background-position:0 16px;

        float:left;

        line-height:16px;

        display:block; 

        font-size:12px;

    }

    .top em{

        background:url(http://img.imooc.com/53cf0fa20001d3dc00200032.jpg);

        background-position:16px 0;

        color:#fff;

    }

    完美的答案!!!

  • Alice611
    2016-03-01 20:00:03

    <!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>3.10新闻中心制作评测题</title>
    <style type="text/css">

    /*在此定义相关CSS样式*/
    .topList{
        width:300px;
        height:180px;
        border:1px solid #E8E8E8;
    }   
    .topList ul{
        list-style:none;
        padding:5px;
        font-size:12px;
    }

    .topList em{
        width:20px;
        height:16px;
        font-style:normal;
        color:#333;
        background:url("http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg");
        background-position:0 16px;
        float:left;
        text-align:center;
    }
    .topList .top em{
         background:url("http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg");
        background-position:16px 0;
        color:#fff;    
    }
    .topList a:link,.topList a:visited{
        text-decoration:none;
        color: #000;
    }
    .topList a:hover,.topList a:actiove{
        text-decoration:none;
        color: #f00;
    }


    </style>
    </head>

    <body>
    <div class="topList">
    <ul>
    <li class="top"><em>01</em>
    <p><a href="http://www.imooc.com/" >【慕客访谈用户篇】“有为屌丝”在路上</a></p>
    </li>
    <li class="top"><em>02</em>
    <p><a href="http://www.imooc.com/">【有奖活动】给父亲的三行书信</a></p>
    </li>
    <li class="top"><em>03</em>
    <p><a href="http://www.imooc.com/">《程序猿,请晒出你的童年》活动获奖公告</a></p>
    </li>
    <li><em>04</em>
    <p><a href="http://www.imooc.com/">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></p>
    </li>
    <li><em>05</em>
    <p><a href="http://www.imooc.com/">【获奖公告】追“球”巅峰,争当“预言帝”</a></p>
    </li>
    <li><em>06</em>
    <p><a href="http://www.imooc.com/">【问卷调查】慕课网用户学习情况大调查</a></p>
    </li>
    </ul>
    </div>
    </body>