Question

我正在为我的HCI课程开发一个Web应用程序，并且我的导航存在问题。我试图让我的导航成为屏幕的整个宽度，每个文本块都相同。我有十件物品。我还想在文本上方添加一个图标，但这仍然在进行中。我当前的代码将文本对齐到左侧，并且没有拉伸导航的全宽。任何帮助都会很棒。

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＆amp;之间有空格=＆amp; "，由于缺少网址甚至是占位符#

，您的链接出现了问题

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

然后问你的问题，试试这个：

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>

Answer 2

这有点接近你想要的吗？

您不需要div元素和锚点。使用显示块，锚具有与div类似的特征。

像这样：

<a id="meetups" href=””>Meet Ups</a>

http://jsfiddle.net/dm6Sp/2/

编辑：我没有费心在小提琴中重新格式化你的代码，所以你可能想要在使用之前自己修复它。它有效，它不是很漂亮。：）

等宽和全宽导航

2 个答案: