Question

我对如何创建没有浮动的导航栏有疑问我创造了这样的东西：

<div class="wrap">
    <nav>
        <ul class="h">
            <li><a href="#">list numeber 1</a></li>
            <li><a href="#">list numeber 2</a></li>
            <li><a href="#">list numeber 3</a></li>
            <li><a href="#">list numeber 4</a></li>
        </ul>
        <div style="clear: both;"></div>
    </nav>
</div>

这种风格：

* {
    padding: 0;
    margin: 0;
}
.wrap {
    width: 800px;
    margin: 100px auto;
}
a{
    text-decoration: none;
}
nav {
    background: yellow;
}

ul {
    list-style: none;
}
li {
    float: left;
    padding: 10px 15px;

}
ul li:hover {
    background: #ffff99;
    border-bottom: 4px solid red;
    padding: 8px 15px;

}

所以，我不喜欢在我的设计中使用<div style="clear: both;"></div>。然后我删除了明确的div并为我的风格添加了一些css：

ul.h:after {
    content: " ";
    clear: both;
}

但我没有工作！ :(
如何使用上面的代码修复它？

TNX

Answer 1

为什么不使用display:inline-block？

jsFiddle here

<强> HTML

<nav>
  <ul class="h">
     <li><a href="#">list numeber 1</a></li><li><a href="#">list numeber 2</a></li><li><a href="#">list numeber 3</a></li><li><a href="#">list numeber 4</a></li>
  </ul>
</nav>

<强> CSS

li {
    background: red;
    display: inline-block;
    padding: 10px;
    border: 1px solid black;
}

Answer 2

将float:left; css中的display:inline-block;更改为li。

在这里：http://jsfiddle.net/rJRBh/

Answer 3

如果您不喜欢浮点数，您可以使用内联块，请小心，因为内联块对空格敏感

你也可以使用CSS表

ul { display: table; } 
li { display: table-cell; }

Answer 4

您可以使用此代码。

我们在Oodles Technologies，采用这种方法。

首先，像这样创建HTML结构。

1 打开

现在我们使用Css，以便导航栏看起来更好

#close{position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
}
.nav{width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .5);
    left: -100%;
    backface-visibility: hidden;
}
ul{float: left;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    text-align: center;
}
li{width: 100%;
    float: left;
    list-style: none;
}

之后我们将包含一些jquery函数来显示隐藏我们的菜单

$(function(){
    $("#open").click(function(){
        $(".nav").animate({left: "0px"});
    });
    $("#close").click(function(){
        $(".nav").animate({left: "-100%"});
    });
});

您可以根据需要进行修改。通过这种方式，我们可以使用css和jquery创建一个全屏导航栏希望它有所帮助。

如何创建没有浮动的导航栏？

4 个答案: