css - 位置 : absolute messes up a:hover

Question

我试图将搜索栏置于页脚的中央。使用以下解决方案后:[https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-and-right-aligned-items][1] 我发现左侧按钮组的样式实际上不起作用不再:当我将鼠标悬停在它们上方时，如果光标位于按钮的中间，则不会应用 a:hover 的 css，但如果光标靠近边缘，则会应用。注释掉行 position: absolute 解决了问题，但是搜索栏当然不再居中了。这是一个微妙但烦人的问题。

HTML:

    <header>
    <nav class="navbar navbar-default">
    <a class="navbar-brand" href="#">Brand</a>
        <ul class="nav navbar-nav pull-left">
            <li><a href="#">
                <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
            </a></li>
            <li><a href="#">
                <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
            </a></li>
            <li><a href="#">
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
            </a></li>
        </ul>
    
        <form class="navbar-form" role="search">
            <div class="form-group">
                <input type="text" class="form-control input-sm" placeholder="Search">
                <button type="submit" id="navbar-search-button" class="btn btn-default btn-sm">
                    <span class="glyphicon glyphicon-search" aria-hidden="true">
                </span>
            </button>
            </div>
        </form>
    
        <ul class="nav navbar-nav pull-right">
            <li><a href="#">
                <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
            </a></li>
            <li><a href="#">
                <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
            </a></li>
        </ul> 
    </nav>
    </header>

CSS:

    header {
        background-color: #194969;
        border: 0;
    }
    .navbar {
        margin: 0 !important;
        padding: 0 !important;
        height: 3em !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: inherit !important;
    }
    .navbar .navbar-form {
        margin-top: 0.75em !important;
    }
    .navbar > a {
        color: #eee !important;
    }
    .navbar li > a {
        margin: 0 !important;
        background-color: #194969;
        color: #eee !important;
        width: 4em;
        text-align: center;
    }
    .navbar li > a:hover {
        border-radius: 0 0 0 0 !important;
        margin: 0 !important;
        color: #194969 !important;
        background-color: #eee !important;
        height: auto !important;
    }
    #navbar-search-button {
        color: #194969;
    }
    .navbar-form
    {
        position: absolute;
        width: 100% !important;
        left: 0;
        text-align: center;
    }

有问题的行是 position:absolute 应用于 .navbar-form。编辑:为清楚起见，截图:http://imgur.com/a/s71Qb .[1]: Bootstrap NavBar with left, center or right aligned items

Answer 1

我的天哪。首先，将 CSS 中的所有 .navbar 更改为 .navbar-nav 并尝试摆脱那些重要的部分!

接下来，您的表单上有一个 100% 的宽度，这意味着该元素虽然不可见，但会覆盖图标的中间，使它们不可点击(因为您将鼠标悬停在表单上。)

所以，带上你所有的 <li>s或 <a>s (请不要两者都使用。测试一个，看看它是否有效)并在它们上放置一个 position:relative 和可能的 z-index 2。这应该将它们移动到绝对定位元素的顶部。不要在 position: 相关元素上放置任何 top、bottom、left 或 right。

如果你做一个代码笔，我会为你做。