Question

为什么ul边框比桌边框宽？为什么ul高度不包含每个li元素？

非常感谢你的帮助...

alt text

    ul
    {
        font-family: Verdana;
        font-size: 8pt;
    }

    ul a
    {
        text-decoration: none;
        color: Black;
    }

    ul a:hover
    {
        text-decoration: underline;
    }

    table
    {
        background-color: Transparent;
        border-collapse: collapse;
    }
    table tr td
    {
        vertical-align: top;
        text-align: left;
        font: Verdana, Geneva, sans-serif;
        font-size: 12px;
    }

    #tblYayinAkisi
    {
        border:1px white solid;
        background-color: #222222;
        font-family: Verdana;
        color: #ffffff;
        vertical-align: middle;
        font-size: 10pt;
        width:100%;
    }

    #tblYayinAkisi th
    {
        background-color: Transparent;
        background-image: url(../images/bckSiyahGriTram.png);
        background-repeat: repeat-x;
        height: 20px;
        padding-left: 10px;
    }

    #tblYayinAkisi td
    {
        background-color: #222222;
    }

    #tblYayinAkisi td ul
    {
        border:1px white solid;
        width:100%;
        margin-left: 10px;
    }
    #tblYayinAkisi td ul li
    {
        clear:both;
        padding-top: 7px;
        list-style: none;
    }
    #tblYayinAkisi td ul li b
    {
        margin-right: 10px;
        float: left;
    }

    #tblYayinAkisi td ul li a
    {
        color: #ffffff;
        float: left;
    }

完整代码：

    <html>
    <head>
        <style>
            body
            {
                background-color: Red;
            }
            ul
            {
                font-family: Verdana;
                font-size: 8pt;
            }
            ul a
            {
                text-decoration: none;
                color: Black;
            }
            ul a:hover
            {
                text-decoration: underline;
            }
            table
            {
                background-color: Transparent;
                border-collapse: collapse;
            }
            table tr td
            {
                vertical-align: top;
                text-align: left;
                font: Verdana, Geneva, sans-serif;
                font-size: 12px;
            }
            #tblYayinAkisi
            {
                border: 1px white solid;
                background-color: #222222;
                font-family: Verdana;
                color: #ffffff;
                vertical-align: middle;
                font-size: 10pt;
                width: 100%;
            }
            #tblYayinAkisi th
            {
                background-color: Transparent;
                background-image: url(../images/bckSiyahGriTram.png);
                background-repeat: repeat-x;
                height: 20px;
                padding-left: 10px;
            }
            #tblYayinAkisi td
            {
                background-color: #222222;
            }
            #tblYayinAkisi td ul
            {
                border: 1px white solid;
                width: 100%;
                margin-left: 10px;
            }
            #tblYayinAkisi td ul li
            {
                clear: both;
                padding-top: 7px;
                list-style: none;
            }
            #tblYayinAkisi td ul li b
            {
                margin-right: 10px;
                float: left;
            }
            #tblYayinAkisi td ul li a
            {
                color: #ffffff;
                float: left;
            }
        </style>
    </head>
    <body>
        <table id="tblYayinAkisi">
            <tbody>
                <tr>
                    <th>
                        YABAN'da bugün
                    </th>
                </tr>
                <tr>
                    <td>
                        <ul>
                            <li><b>00:00</b><a target="_blank" href="programlar.aspx?id=24">TROFE ODASI</a></li>
                            <li><b>01:00</b><a target="_blank" href="programlar.aspx?id=17">YERLİ YABAN</a></li>
                            <li><b>01:30</b><a target="_blank" href="programlar.aspx?id=16">HEDEF</a></li>
                            <li><b>02:00</b><a target="_blank" href="programlar.aspx?id=28">İZCİ</a></li>
                            <li><b>02:30</b><a target="_blank" href="programlar.aspx?id=4">KUŞLAR</a></li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="text-align: center;">
                            <img src="images/canliYayin.png" />
                            <img src="images/tumAkis.png" />
                        </div>
                        <br />
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

Answer 1

出现高度问题是因为您同时拥有b内容和内容浮动 - 这意味着li元素没有任何真实（意思是：不浮动）内容。移除浮动，你应该好好去。

Answer 2

只需删除ul元素的100％宽度，并添加右边距，如下所示：

 #tblYayinAkisi td ul
 {
     border: 1px white solid;
     margin-left: 10px;
     margin-right: 10px;
 }

它修复了Firefox中的显示，并且适用于其他浏览器。

为什么ul边框比桌边框宽？

2 个答案: