EXAMPLE 1

Question

我不确定为什么我的注册和登录正好相互依赖。可能是一个简单的修复，但我对此非常新鲜。我还想将下拉菜单保持在登录文本的正下方，这也存在一些问题。我似乎无法让它像一个普通的dropmenu。我想要实现的一个很好的例子是stackoverflow站点顶部的帮助框。 jsfiddle：http://jsfiddle.net/Karmatix/v2z5bnvh/
如果你能解释一下这个解决方案我会非常感激。我想了解为什么我错了并理解解决方案，所以它不会再发生。提前谢谢！

html（得到了一些jquery，但这不是问题）

<!doctype html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('li').hover(function(){
            $(this).find('ul>li').fadeToggle(400);
        });
    });
    </script>
    <link rel="stylesheet" type="text/css" href="text.css"
</head>

<body>
    <nav>
        <ul>
            <li>Login
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </li>
            <li>Register</li>
        </ul>
    </nav>
</body>
</html>

css

body {
    padding: 0;
    margin: 0;
}

nav ul{
    margin: 0;
    padding: 0;
    list-style:none;
}

nav ul li{
    float: right;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: right;
    background-color: #000;
    color: #fdfdfd;
    display: inline;
}

nav ul li a{
    text-decoration: none;
    color: #fdfdfd;
}

nav ul li li {
    display: none;
    color: #fdfdfd;
}

Answer 1

您的li标记上有width: 100%个标记，因此它们占据了网页的整个宽度，然后堆叠。将它们设置为width: auto（或删除宽度，或将其设置为值）将解决这个问题。

Answer 2

您已将浮动li元素的宽度设置为100％，因此它们自然会位于两条线上，一条线在另一条线之上。

也许您打算使用50％的宽度，这会将两个li彼此相邻放在一行。

＆＃13;

nav ul{
    margin: 0;
    padding: 0;
    list-style:none;
}

nav ul li{
    float: right;
    width: 50%;
    height: 30px;
    line-height: 30px;
    text-align: right;
    background-color: #000;
    color: #fdfdfd;
    display: inline;
}

nav ul li a{
    text-decoration: none;
    color: #fdfdfd;
}

nav ul li li {
    display: none;
    color: #fdfdfd;
}

＆＃13;

<nav>
  <ul>
    <li>Login
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </li>
    <li>Register</li>
  </ul>
</nav>

＆＃13;

Answer 3

这是您的问题：width: 100%;

当li宽度设置为占据页面的整个宽度时，它会强制下一个li。

删除此行，它将按预期工作。

Answer 4

为什么列表不是内联的简单原因是因为您在每个列表项上调用width:100%。所以他们没有空间坐在一起，每个人占据宽度的100％。但是您的CSS中也存在一些结构性问题，可以通过这些问题进行修正以帮助您将此示例以及可能添加到此导航栏的未来元素。

1）您正试图在li标记上设置所有样式（下面的代码）。对于您同时使用float:right和display:inline的人而言，这是不必要的。在您的情况下，您不需要浮动li（ * 1 ）（我会使用inline-block代替，因为inline没有＆＃39} ; t取其子项的宽度和高度（ * 2 ））。接下来，您可以移除background-color（ * 3 ）和width（ * 4 ），以便我们将其添加到父级。

nav ul li{
   /*float: right;*/ //remove (*1)
   /*width: 50%;*/ //remove (*4)
   height: 30px;
   line-height: 30px;
   text-align: right;
   /*background-color: #000;*/ //remove (*3)
   color: #fdfdfd;
   display: inline-block; //changed (*2) 
}

2）将nav容器设置为具有颜色和宽度，因为它是父级，并且可能包含其他元素，如徽标。同时添加overflow:hidden，用于清除我们即将添加到无序列表中的浮动：

nav{
   background-color: #000;
   width: 100%;
   overflow: hidden;
}

3）最后，要将整个列表容器向右浮动，请将float: right属性添加到列表的父ul中（ * 1 ）：

nav ul{
   float: right; //add (*1)
   margin: 0;
   padding: 0;
   list-style:none;
}

现在，您的列表将内嵌并向右浮动，如您所愿：

EXAMPLE 1

DROPDOWN UPDATE

为了让下拉列表工作，您需要更改一些内容：

1）应隐藏父ul，而不是列表项。因此，请从display: none

中删除li

nav ul li li {
   /*display: none;*/ //remove
   color: #fdfdfd;
}

2）而是将其添加到父ul（＃1 ）。您还需要定位此元素，使其显示在其容器外部。您可以使用position:absolute（ * 2 ）

执行此操作

nav ul li ul {
   background: #000;
   position: absolute; //add (*2) 
   display: none; //add (*1)
   padding: 10px; //add other styling rules if needed
}

3）定位元素absolute将它们从文档流中移除，如果没有另外指定，则使它们相对于主体。因此，要将其移至最左上角/最左上角，您需要position: relative添加到它的父级nav ul li：

nav ul li{
   display: inline-block;
   vertical-align: top;
   height: 30px;
   line-height: 30px;
   color: #fdfdfd;
   position: relative; //add
   cursor: pointer; //you can add this if you want - mouse pointer
}

4）最后，你需要纠正我上面添加的内容，但现在需要改变。这是overflow: hidden nav上的ul。最初我添加它来清除浮动的absolute元素，但是（如果它不是不言自明的）它的作用是隐藏＆＃34;溢出＆＃34; （包括nav{ background-color: #000; width: 100%; /*overflow: hidden*/ //remove (*1) } nav:after{ //use ':after' to clear the elements (*2) content: ""; display: block; clear:both; }定位元素＆＃34;溢出＆＃34;它的边界）。在这种情况下，由于下拉菜单，需要显示溢出。所以删除它（ 1 * ）并改为使用clearfix（ * 2 ）：

.stop()

5）奖励：同样在您的jQuery中，为了防止在悬停时反复触发操作的动画，您可以在fadeToggle()之前添加$(this).find('ul').stop().fadeToggle(400); ：

{{1}}

为什么我的文字不是内联的？

4 个答案:

EXAMPLE 1

EXAMPLE 2