0

最初の投稿でプログラミングに比較的慣れていないため、ボタンをページのさらに上やサイド ナビゲーション バーの横に配置しようとすると問題が発生します。画像とコードを表示してください。

HTML:

 <nav>
        <ul>
               <li> <a href="index.html">Home</a></li>
               <li> <a href="news.html">News</a></li>
               <li> <a href="events.html">Events</a></li>
               <li> <a href="galleries.html">Galleries</a></li>
               <li> <a href="videos.html">Videos </a></li>
               <li> <a href="history.html">History</a></li>
               <li><a href="contact.html"> Contact</a></li>
           </ul>    
      </nav>    



      <a id="bigthumbnailone" href="news.html">New Website Launched!</a>          
      <a id="bigthumbnailtwo" href="news.html">Next Major: i49 </a>

CSS:

* {
margin:0px;
padding:0px;
  }

  a:link {
text-decoration:none;
color:#0099FF;
  }

  a:hover {
color:#0066FF;
font-weight:bold;
   }

  a:visited {
text-decoration:none;
color:#0099FF;
   }


  nav ul li {
display:;
margin:1px;
padding:30px;
list-style-type: none;
font-family:Segoe UI Light;
font-size:30px;
  }


 /*end navigation*/

 #bigthumbnailone {
display:block;
width:600px;
height:300px;
text-decoration:none;
text-align:left;
font-family:Segoe UI Light;
font-size:25px;
background-image:url(../images/thumbnails/messi.png);
outline-style:solid;
outline-color:#0099FF;
margin: 0 auto;
 }

  #bigthumbnailtwo {
display:block;
width:600px;
height:300px;
text-decoration:none;
text-align:left;
font-family:Segoe UI Light;
font-size:25px;
background-image:url(../images/thumbnails/messi.png);
outline-style:solid;
outline-color:#0099FF;
margin: 0 auto;
  }

ナビゲーション バーとボタンの両方を隣り合わせにするには、何を追加する必要がありますか?

4

2 に答える 2

0

display:inline-block;次のように使用できます。

nav ul li {
    display:inline-block;
    margin:1px;
    padding:30px;
    list-style-type: none;
    font-family:Segoe UI Light;
    font-size:30px;
}

 #bigthumbnailone, #bigthumbnailtwo {
    display:inline-block;
    width:600px;
    height:300px;
    text-decoration:none;
    text-align:left;
    font-family:Segoe UI Light;
    font-size:25px;
    background-image:url(../images/thumbnails/messi.png);
    outline-style:solid;
    outline-color:#0099FF;
    margin: 0 auto;
}

次のように、順序なしリスト内にサムネイルを配置します。

<nav>
    <ul>
        <li> <a href="index.html">Home</a>

        </li>
        <li> <a href="news.html">News</a>

        </li>
        <li> <a href="events.html">Events</a>

        </li>
        <li> <a href="galleries.html">Galleries</a>

        </li>
        <li> <a href="videos.html">Videos </a>

        </li>
        <li> <a href="history.html">History</a>

        </li>
        <li><a href="contact.html"> Contact</a>

        </li> <a id="bigthumbnailone" href="news.html">New Website Launched!</a>  <a id="bigthumbnailtwo" href="news.html">Next Major: i49 </a>
    </ul>
</nav>

実施例

表示および表示値に関する MDN ドキュメント

于 2013-08-16T15:43:10.447 に答える