CSS如何使
  • 对齐
      的下边框?
  • uukirby 2013-01-31 05:06:15

    <!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=utf-8" />
    <title>UL与LI对齐</title>
    <style type="text/css">
    ul.menu
    {
    font-size:18px;
    list-style-type:none;
    margin:0;
    margin-left:20px;
    padding:0;
    float:left;
    }

    ul.menu li
    {
    float:left;
    width:100px;
    line-height:24px;
    border:#CCC 2px solid;
    border-bottom-color:#FFF;
    }

    ul.menu li.selected
    {
    font-weight:bold;
    float:left;
    width:120px;
    line-height:30px;
    border:#CCC 2px solid;
    border-bottom-color:#FFF;
    }

    ul.menu li:hover
    {
    background-color:#0CF;
    }
    </style>
    </head>

    <body>
    <ul class="menu">
    <li class="selected">NO.1</li>
    <li>NO.2</li>
    <li>NO.3</li>
    </ul>
    </body>
    </html>


    显示出来的情况:

    想让所有的<li>标签对齐<ul>边框的下边框
    怎么做?

    在此先表示感谢……
    ...全文
    558 6 打赏 收藏 转发到动态 举报
    AI 作业
    写回复
    用AI写文章
    6 条回复
    切换为时间正序
    请发表友善的回复…
    发表回复
    • 打赏
    • 举报
    回复
    我只说你自己 去调整。ul.menu li 这个属性 你加上超出隐藏。然后 记得增大line-height:的值。 具体增大多少你自己尝试。
    云水千寻 2013-02-04
    • 打赏
    • 举报
    回复
    这个主要靠vertical-align: bottom来实现 但对li进行float后,vertical-align: bottom就不起作用了 去除li的float,改用display:inline-block后vertical-align: bottom可用。 试试下面这个样式:
    ul.menu
    {
        font-size:0;
        list-style-type:none;
        margin:0;
        margin-left:20px;
        padding:0;
        float:left;
    }
     
    ul.menu li
    {
        display: inline-block; font-size:18px;
        width:100px; vertical-align: bottom;
        line-height:24px;
        border:#CCC 2px solid;
        border-bottom-color:#FFF;
    }
     
    ul.menu li.selected
    {
        font-weight:bold;
        width:120px;
        line-height:30px;
        
    }
     
    ul.menu li:hover
    {
        background-color:#0CF;
    }
    uukirby 2013-02-02
    • 打赏
    • 举报
    回复
    引用 3 楼 xiaofan_sap 的回复:
    你这个需求是矛盾的。 根据lz的设置,ul还有li都是浮动的,其中li浮动的从左至右排列开来,你想在选中的那个li变换样式,行高也调大了6px,这样的后果就是 把ul的高度给撑大了,其他的li会空出一部分东西来呀。选项卡效果没必要这样改变字体,你可以设置斜面效果(通过设置border 左上边框,右下边框)等来突出显示当前选项。
    知道可以通过border来凸显,但是这里主要是想知道如果想做出高低不同的效果应该怎么办…… 正是因为知道ul被撑大了,才希望知道如何能让li对齐ul的下边框……
    xiaofan_sap 2013-02-01
    • 打赏
    • 举报
    回复
    你这个需求是矛盾的。 根据lz的设置,ul还有li都是浮动的,其中li浮动的从左至右排列开来,你想在选中的那个li变换样式,行高也调大了6px,这样的后果就是 把ul的高度给撑大了,其他的li会空出一部分东西来呀。选项卡效果没必要这样改变字体,你可以设置斜面效果(通过设置border 左上边框,右下边框)等来突出显示当前选项。
    uukirby 2013-01-31
    • 打赏
    • 举报
    回复
    引用 1 楼 fzfei2 的回复:
    CSS code?123456789ul.menu li {float: left;width: 100px;line-height: 24px;border: #CCC 2px solid;border-bottom: none;vertical-align: bottom;height: 25px;} 你试试 height: 25px; 你自己再调整 ……
    还是不行……我的目的是使选中项的li显得大一点,凸显选中的感觉。 所以还是一个选项卡式的风格,所以要求所有的<li>下部要对齐……
    fzfei2 2013-01-31
    • 打赏
    • 举报
    回复
    ul.menu li {
    float: left;
    width: 100px;
    line-height: 24px;
    border: #CCC 2px solid;
    border-bottom: none;
    vertical-align: bottom;
    height: 25px;
    }
    
    你试试 height: 25px; 你自己再调整

    61,128

    社区成员

    发帖
    与我相关
    我的任务
    社区描述
    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
    社区管理员
    • HTML(CSS)社区
    加入社区
    • 近7日
    • 近30日
    • 至今
    社区公告
    暂无公告

    试试用AI创作助手写篇文章吧