0

新手。我有 5 个按钮，欢迎、关于我们、服务、体验和联系我们。它们的大小和间距正确，直到我在它们之间添加 1px 列以添加垂直灰色条来分隔按钮。当我添加垂直分隔线时，图像和按钮区域开始从左侧开始拉伸。添加了所有线条后，从左侧开始出现失真，但最右侧的按钮（联系我们）看起来还不错。

此代码已注释掉垂直条列：

    <tbody>
        <tr>
            <td colspan="8">
                <img alt="" src="images/whitepixel.gif" height="14" width="770" border="0">
            </td>
        </tr>
        <tr>
            <td width="17">
                <img alt="" src="images/whitepixel.gif" height="65" width="17" border="0">
            </td>
            <td width="183">
                <a href="McD_index.html">
                    <img alt="" src="images/menu_logo.gif" height="65" width="183" border="0"></a>
            </td>
            <td width="17">
                <img alt="" src="images/whitepixel.gif" height="65" width="17" border="0">
            </td>
            <!--
            <td width="1">
                <img alt="" src="images/vertBar.png" height="65" width="1" border="0"
            </td>
            -->
            <td width="111">
                <a href="McD_welcome.html">
                    <img alt="" src="images/menu_WelcomeON.png" height="65" width="110" border="0"></a>
            </td>
            <!--
            <td width="1">
                <img alt="" src="images/vertBar.png" height="65" width="1" border="0"
            </td>
            -->
            <td width="111">
                <a href="McD_aboutus.html">
                    <img alt="" src="images/menu_AboutUsOFF.png" height="65" width="111" border="0"></a>
            </td>
            <!--
            <td width="1">
                <img alt="" src="images/vertBar.png" height="65" width="1" border="0"
            </td>
            -->
            <td width="111">
                <a href="McD_services.html">
                    <img alt="" src="images/menu_ServicesOFF.png" height="65" width="111" border="0"></a>
            </td>
            <!--
            <td width="1">
                <img alt="" src="images/vertBar.png" height="65" width="1" border="0"
            </td>
            -->
            <td width="111">
                <a href="McD_experience.html">
                    <img alt="" src="images/menu_ExperienceOFF.png" height="65" width="111" border="0"></a>
            </td>
            <!--
            <td width="1">
                <img alt="" src="images/vertBar.png" height="65" width="1" border="0"
            </td>
            -->
            <td width="111">
                <a href="McD_contactus.html">
                    <img alt="" src="images/menu_ContactUsOFF.png" height="65" width="110" border="0"></a>
            </td>
        </tr>
        <tr>
            <td colspan="8">
                <img alt="" src="images/whitepixel.gif" height="15" width="770" border="0">
            </td>
        </tr>
        <tr>
            <td colspan="8">
                <img alt="" src="images/greenpixel.gif" height="15" width="770" border="0">
            </td>
        </tr>

我尝试的一切都没有奏效！

我只希望按钮显示正常宽度并与垂直线分隔符均匀间隔。我的 vertBar.png 文件只是一个 1 px 的灰色垂直条

谢谢！

4

1 回答 1

0

只是为了帮助您：

的HTML：

<div id="menu">
<a href="#">option 1</a><a href="#">option 2</a><a href="#">option 3</a><a href="#">option 4</a>
</div>

<div id="content" class="container">
<p>Hello, world</p>
</div>

CSS： 

#menu {width:90%;margin:14px auto;background:oldlace}
#menu > a {display:inline-block;line-height:65px;padding:0 10px;border-right:1px solid red;}
#menu > a:hover {background:skyblue}
.container {width:90%;margin:0 auto;}

检查：http: //jsfiddle.net/68Hhc/

于 2013-11-12T22:12:54.990 回答