Question

我在主页上工作，我的菜单栏出了问题！

我制作了一个带有一些项目的无序列表和CSS-Tag＆＃34; display：inline-block＆＃34 ;! 然而，如果我将其中一个项目悬停，则最后一项跳转到下一行！

信息：问题仅发生在Dreamweavers内置预览浏览器中！如果我在Firefox中打开网站，它可以完美运行！

You can see the concept on http://test.guger.bplaced.net!

有人能帮助我吗？

谢谢！

HTML代码：

<nav id="cNav">
    <table class="tNav">
        <tr>
            <td>
                <ul>
                    <li><a href="/">G</a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="">Software</a></li>
                    <li><a href="about/">&Uuml;ber</a></li>
                </ul>
            </td>
        </tr>
    </table>
</nav>

CSS代码：

#cNav {
    background-color: rgb(5, 90, 160);

    margin: 0;
    padding: 0;

    width: 100%;
}

.tNav {
    margin-left: auto;
    margin-right: auto;

    font-weight: bold;
    font-size: 22pt;

    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

.tNav ul {
    padding: 0;
    margin-top: 0.4em;
    margin-bottom: 0.4em;

    margin-left: 0;
    margin-right: 0;

    /*If I write this tag here, it works!*/
    /*width: 101%;*/
}

.tNav ul li {
    display: inline-block;

    padding-left: 2em;
    padding-right: 2em;

    padding-top: 0;
    padding-bottom: 0;
}

    .tNav ul li a {
        outline: 0;

        color: white;

        position: relative;

        text-decoration: none;

        transition: color 0.3s;
    }

    .tNav ul li a::after {
        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        height: 4px;

        background: white;

        content: '';

        opacity: 0;

        -webkit-transition: background 0.3s, opacity 0.3s, -webkit-transform 0.3s;

        -moz-transition: background 0.3s, opacity 0.3s, -moz-transform 0.3s;

        transition: background 0.3s, opacity 0.3s, transform 0.3s;

        -webkit-transform: translateY(10px);

        -moz-transform: translateY(10px);

        transform: translateY(10px);

        margin: 0;
    }

    .tNav ul li a:hover {
        color: #7297EC;
    }

    .tNav ul li a:hover::after {    
        opacity: 1;
        background: #7297EC;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        transform: translateY(0px);
    }

问题的屏幕截图：

Answer 1

将你的div放在ul＆gt; li并使用CSS来完成制作响应列的肮脏工作:) https://css-tricks.com/guide-responsive-friendly-css-columns/

HTML / CSS - ul，li中不需要的Wordwrap

1 个答案: