0

私は HCI クラスの Web アプリに取り組んでおり、ナビゲーションに問題があります。各テキストブロックが等しくなるように、ナビゲーションを画面の全幅にしようとしています。私は合計10個のアイテムを持っています。テキストの上にアイコンも含めたいのですが、それはまだ作業中です。私の現在のコードは、テキストを左に揃えており、ナビゲーションの全幅を拡大していません。どんな助けでも素晴らしいでしょう。

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 に答える