Question

我正在尝试使用CSS进行nowrap导航但是当我将鼠标悬停在父列表上时缺少更好的描述跳转 HTML

＆＃13;

 html { 
      overflow-x: hidden;
    }
    ul li{
        list-style:none;
    }
    nav{
        margin: 0 -9999rem;
        padding: 0.25rem 9999rem;
        height:40px;
        background-color:white;
      overflow:hidden;
    }

    nav .user-nav{
        position:absolute;
        white-space:nowrap;
    }
    nav .user-nav > li{
          display: inline-block;
        margin: 0 10px;
    }

    nav .user-nav li a{
        text-decoration:none;
        color:black;
    }

    nav .user-nav li a:hover{
        color:red;
    }
    nav .user-nav > .interact li{
        display:none;
        background-color:white;
        padding:10px;
    }
    nav .user-nav > .interact:hover li{
        display:block;
    }

    nav .user-nav > .interact li:hover{
        color:red;
    }

＆＃13;

<nav>
        <ul class="user-nav">
            <li><a href="">Reccent reviews</a></li>
            <li><a href="">Reccent addtions</a></li>
            <li class="interact"><a href="">Login/Register</a>
                <ul>
                <li><a href="">Login</a></li>
                <li><a href="">Register</a></li>
                </ul>
            </li>
        </ul>
    </nav>

＆＃13;

我把它添加到下面的小提琴中

https://jsfiddle.net/23e5aLp2/

我最初使用浮点数完成它但是因为阅读更多我发现内联块是更好的选择，问题是因为我提到当将鼠标悬停在下拉菜单上时父列表似乎跳转

Answer 1

我建议inline-table或inline-block用于课程nav .user-nav li

Fiddle

Answer 2

因为列表项是块元素，因此当容器产生时使容器的大小更大。使下拉项绝对，您的问题将得到解决。

http://prntscr.com/ddn5xe

http://prntscr.com/ddn5gv

导航问题; text-align：justify解决方案可能有效，或者是flexbox解决方案。尝试使用Google搜索“nav justify text”或“nav flexbox”，您将找到解决方案的全部内容。

Answer 3

让<ul>内的.interact位于绝对位置，例如：

.interact ul {
  position: absolute;
}

.interact ul {
  position: absolute;
}

html { 
      overflow-x: hidden;
    }
    ul li{
        list-style:none;
    }
    nav{
        margin: 0 -9999rem;
        padding: 0.25rem 9999rem;
        height:40px;
        background-color:white;
      overflow:hidden;
    }

    nav .user-nav{
        position:absolute;
        white-space:nowrap;
    }
    nav .user-nav > li{
          display: inline-block;
        margin: 0 10px;
    }

    nav .user-nav li a{
        text-decoration:none;
        color:black;
    }

    nav .user-nav li a:hover{
        color:red;
    }
    nav .user-nav > .interact li{
        display:none;
        background-color:white;
        padding:10px;
    }
    nav .user-nav > .interact:hover li{
        display:block;
    }

    nav .user-nav > .interact li:hover{
        color:red;
    }

<nav>
        <ul class="user-nav">
            <li><a href="">Reccent reviews</a></li>
            <li><a href="">Reccent addtions</a></li>
            <li class="interact"><a href="">Login/Register</a>
                <ul>
                <li><a href="">Login</a></li>
                <li><a href="">Register</a></li>
                </ul>
            </li>
        </ul>
    </nav>

希望这有帮助！

Answer 4

实际上，如果在所有内联块元素中添加相同的内容，内联块的效果很好，但由于它们是块元素，因此它们的默认设置将div包围在其中的内容中。要确保内容在行中正确对齐，您需要在内联块元素的css中专门指定内容对齐属性。

您方案中最简单的解决方案是将vertical-align:top;添加到nav .user-nav > li类或具有display:inline-block;属性的元素，问题将得到解决。

希望这有帮助。

内联块nowrap调整大小问题

4 个答案: