Question

首先发布并且相对较新的编程，我在尝试将我的按钮放在页面上方以及旁边的导航栏时遇到问题，请查看picture和代码：

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;
  }

我需要添加什么才能确保我的导航栏和按钮可以彼此相邻？

Answer 1

你可以这样使用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>

Working Example

MDN documentation for display and display values

Answer 2

我会在你的按钮周围添加一个div，然后浮动：离开你的导航和按钮周围的div。

我无法将按钮放在导航栏旁边

2 个答案: