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

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在这里

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

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

给你：http: //jsfiddle.net/rJRBh/

Answer 3

如果你不喜欢浮动，你可以使用 inline-block，请小心，因为 inline-block 对空格很敏感

你也可以使用 CSS 表格

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

Answer 4

您可以使用此代码。

我们 Ooodles 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 创建一个全屏导航栏，希望对您有所帮助。