0

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

HTML：

<nav>
    <div id = "location"><a href=””&gt;Location</a></div>
    <div id = "weather"><a href=””&gt;Weather</a></div>
    <div id = "waterlevels"><a href=””&gt;Water Levels</a></div>
    <div id = "wavereports"><a href=””&gt;Wave Reports</a></div>
    <div id = "runs"><a href=””&gt;Current Runs</a></div>
    <div id = "hatches"><a href=””&gt;Hatches</a></div>
    <div id = "photogallery"><a href=””&gt;Photo Gallery</a></div>
    <div id = "anglermaps"><a href=””&gt;Angler Maps</a></div>
    <div id = "recipes"><a href=””&gt;Recipes</a></div>
    <div id = "meetups"><a href=””&gt;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;
}
4

2 回答 2

2

也许它是一个复制粘贴错误，但这不是正确的 HTML：

<div id = "location"><a href=””&gt;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>您的链接周围

于 2012-10-23T14:28:58.270 回答
1

这是不是更接近你想要的？

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

像这样：

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

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

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

于 2012-10-23T14:29:03.717 回答