html - 等宽和全宽导航

Question

我正在为我的 HCI 类(class)开发一个网络应用程序，但我的导航有问题。我试图让我的导航成为屏幕的整个宽度，每个文本 block 都是相等的。我总共有十件元素。我还想在文本上方包含一个图标，但这仍在进行中。我当前的代码将文本左对齐，并且没有拉伸(stretch)整个导航宽度。任何帮助都会很棒。

HTML:

<nav>
    <div id = "location"><a href=””>Location</a></div>
    <div id = "weather"><a href=””>Weather</a></div>
    <div id = "waterlevels"><a href=””>Water Levels</a></div>
    <div id = "wavereports"><a href=””>Wave Reports</a></div>
    <div id = "runs"><a href=””>Current Runs</a></div>
    <div id = "hatches"><a href=””>Hatches</a></div>
    <div id = "photogallery"><a href=””>Photo Gallery</a></div>
    <div id = "anglermaps"><a href=””>Angler Maps</a></div>
    <div id = "recipes"><a href=””>Recipes</a></div>
    <div id = "meetups"><a href=””>Meet Ups</a></div>
</nav>

CSS:

nav {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient:horizontal;
    -moz-box-orient:horizontal;
    box-orient:horizontal;
    border-bottom:2px solid #111;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background:white;
}

nav a { 
    display:block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    color:#111;
    padding:10px;
    -webkit-box-flex:1;
    -moz-box-flex:1;
    box-flex:1;
    text-align:center;
    text-decoration:none;
    -webkit-transition:all .4s linear;
    -moz-transition:all .4s linear;
    -o-transition:all .4s linear;
    transition:all .4s linear;
}

Answer 1

可能是复制粘贴错误，但这不是正确的 HTML:

<div id = "location"><a href=””>Location</a></div>

id之间有空格& = & " , 那么你的链接有问题，因为缺少 URL 甚至是占位符 #

也许这可以解决一些浏览器问题。

那么对于你的问题，试试这个:

nav {
  text-align: center;
}
nav a { 
   display:inline-block;
   margin: 0 auto;
   width: auto;
   color:#111;
   padding:10px;
   -webkit-box-flex:1;
   -moz-box-flex:1;
   box-flex:1;
   text-align:center;
   text-decoration:none;
   -webkit-transition:all .4s linear;
   -moz-transition:all .4s linear;
   -o-transition:all .4s linear;
   transition:all .4s linear;
}

删除 <div>在你的链接周围