nav li 标签的自动宽度答案

【问题标题】：Auto width for nav li tagsnav li 标签的自动宽度
【发布时间】：2015-04-11 14:07:09
【问题描述】：

我正在制作我的导航我正在制作我的导航我正在制作我的导航我正在制作我的导航我正在制作我的导航我正在制作我的导航我正在制作我的导航我正在尝试制作我的导航制作我的导航我正在尝试制作我的导航

<div class="headercss">class="header">

    <div class="headerlogo">class="header">

    </div>


</div>

/* BODY */

body {
    margin: 0px;
    background-color: #000000;
}


/* 1. HEADER */

.headercssheader {
    width: auto;
    height: 500px;
    position: relative;
}

.headerlogoheader {
    width: 980px;
    height: 250px;
    position: relative;
    left: 50%;
    margin-left: -490px;
}

.nav {
    width: 980px;
    height: 70px;
    position: relative;
    left: 50%;
    margin-left: -490px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a:link, a:visited {
    display: block;
}

a:hover, a:active {
}

【问题讨论】：

标签： html css size width nav

【解决方案1】：

将此CSS 添加到您的ul 标签：

display:table;
table-layout: fixed;

这个给你的li CSS：

display: table-cell;

应该工作:)

【讨论】：

BTW 是 ul 标签充当水平导航栏吗？如果是，我将编辑答案/
是水平导航栏吗？它的代码不同。

【解决方案2】：

根据列表中项目的数量以百分比形式给出宽度。

ul{ list-style-type: none;
        margin: 0;
        padding: 0;
        float:left;
        width:100%;
        overflow: hidden;
    }

li {
    float: left;
    width:25%;
}

【讨论】：

【解决方案3】：

你也可以使用 display: flex

.nav ul {
  display: flex;
}
.nav li {
  flex: 1;
}

【讨论】：