Question

我正在尝试用css和html制作菜单。我不知道我最终将使用哪种尺寸，所以我做了一个菜单，可以是横向和纵向的任何尺寸我想要它但我有一个问题。由于某种原因，菜单的右侧是隐藏的。

enter image description here

HTML：

<table>
        <tr>
                <td id="menu_top_left"></td><td id="menu_top_center"></td><td id="menu_top_right"></td>
        </tr>
        <tr id="menu_center">
                <td colspan="2"><a href="#">Link 1</a></td>
        </tr>
        <tr id="menu_center">
                <td colspan="2"><a href="#">Link 2</a></td>
        </tr>
        <tr id="menu_center">
                <td colspan="2"><a href="#">Link 3</a></td>
        </tr>
        <tr id="menu_center">
                <td colspan="2"><a href="#">Link 4</a></td>
        </tr>
        <tr id="menu_center">
                <td colspan="2"><a href="#">Link 5</a></td>
        </tr>
        <tr id="menu_center">
                <td colspan="2"><a href="#">Link 6</a></td>
        </tr>
        <tr>
                <td id="menu_bot_left"></td><td id="menu_bot_center"></td><td id="menu_bot_right"></td>
        </tr>
</table>

CSS：

table{
        width:200px;
        border-spacing:0;
}
table tr #menu_top_left{
        width:20px;
        height:20px;
        background:url(top_left.png);
}
table tr #menu_top_center{
        width:160px;
        height:20px;
        background:url(top_center.png) repeat-x;
}
table tr #menu_top_right{
        width:20px;
        height:20px;
        background:url(top_right.png) repeat-x;
}
table #menu_center{
        background:url(center_center.png) repeat;
        text-align:center;
}
table tr #menu_bot_left{
        width:20px;
        height:20px;
        background:url(bot_left.png);
}
table tr #menu_bot_center{
        width:160px;
        height:20px;
        background:url(bot_center.png) repeat-x;
}
table tr #menu_bot_right{
        width:20px;
        height:20px;
        background:url(bot_right.png) repeat-x;
}

隐藏的右侧部分应该像没有隐藏的左侧部分一样。我无法找到解决问题的方法。
希望有人能为我解决，谢谢。抱歉我的英文不好..

Answer 1

首先，您不应该使用表格进行格式化;它们用于显示表格数据。您的导航链接实际上只是列表中的项目，因此请使用＆lt; ul＆gt;和＆lt; li>标签代替。您可以在标记内包含这些元素。

其次，当你真的不需要时，你正在使用图像。你想实现：

红色单像素边框
圆角
容器周围有红色'发光'。

您可以使用以下CSS属性获取所有这三种效果：

编辑：这是一个实例。你会看到这样有多容易：）

http://jsfiddle.net/ntwiles/9Qv3h/

Answer 2

同意Nathan上面的建议，但为了帮助您了解当前代码的错误：

表格中的单元格数量不均匀 - 顶部和底部有三个单元格，中间只有两个单元格。您需要将colspans增加到“3”，以便您的单元格跨越行的整个宽度。另外，我会在td级而不是tr级应用背景样式，就像你在顶部和底部一样。

html和css中的菜单效果不佳

2 个答案: