如何在HTML中對齊我的元素？

我目前正在做一個練習示例網站，作爲我的計算機科學GCSE課程的一部分。我在導航CSS中遇到了麻煩。該網站是在進步非常多，所以我知道這是不是很大，但這裏是我的代碼：如何在HTML中對齊我的元素？

<!DOCTYPE html> 
<html> 

    <head> 

     <title>The Cotswold Jeweller</title> 
     <link rel="stylesheet" href="../Assets/css/normalize.css" media="screen" type="text/css"> 
     <link rel="stylesheet" href="../Assets/css/main.css" media="screen" type="text/css"> 
     <link rel="stylesheet" href="../Assets/css/grid.css" media="screen" type="text/css"> 

    </head> 

    <body> 

     <div class="head"> 

      <h1>The Cotswold Jeweller</h1> 

     </div> 

     <div class="nav_contain"> 

      <ul class="nav"> 

       <li><h2><a href="index.html">Home</a></h2></li> 
       <li><h2><a href="#">Services</a></h2></li> 
       <li><h2><a href="#">Location</a></h2></li> 

      </ul> 

     </div> 

     <div class="wrapper"> 

      <p>Welcome to the home of The Cotswold Jeweller on the web. Here at The Cotswold Jeweller we offer a unique and reliable service to create a friendly and local experience for our customers. We are very proud to also stock products from many different popular and large groups, such as Citizen, Butler and Peach and many more while we still maintain our local, reliable ethos.</p> 

      <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=The+Cotswold+Jeweller,+Granville+Court,+Shipston-on-Stour&amp;aq=0&amp;oq=The+Cotswold+Jewe&amp;sll=52.8382,-2.327815&amp;sspn=8.08612,21.643066&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;ll=52.062826,-1.623898&amp;spn=0.006295,0.006295&amp;t=m&amp;iwloc=A&amp;output=embed"></iframe> 

     </div> 

     <div class="footer"> 

      <p>Copyright 2014 &copy; The Cotswold Jeweller</p> 

     </div> 

    </body> 

</html>

這裏是CSS：

body { 

    background-color: #FFFFFF; 

} 

.wrapper { 

    width: 1100px; 
    margin: auto; 

} 

.head { 

    text-align: center; 
    font-family: "Times New Roman"; 
    font-size: 32px; 

} 

.nav li h2 a { 

    text-decoration: none; 
    color: #000000; 
    font-family: "Times New Roman"; 
    width: 366px; 
    float: left; 

} 

.nav { 

    list-style: none; 
    width: 1100px; 
    margin: auto; 
    text-align: center; 

} 

.nav_contain { 

    border-top: 5px #990000 solid; 
    border-bottom: 5px #990000 solid; 

}

我想有間導航欄，導航容器的兩個邊界，但它們沒有正確對齊。請你在下面提供一個解決方案。謝謝。

來源

2013-12-08 111111100101110111110

添加此

.nav li{ 
    display:inline-block; 
}

並取出H2標籤。

您可能還必須縮小「a」標籤的大小，以使它們在屏幕上保持一致。我目前在1280像素的顯示器上，我必須將它們的寬度減小到300像素。

另一種選擇是隻刪除li標籤完全。鏈接應該仍然並排顯示，並且因爲您的邊框不在「.nav」之內，所以它們應該包含它。

如果它不起作用，請讓我知道。

來源

2013-12-08 21:55:58

您可以將overflow: auto添加到.nav容器。這將防止它的高度崩潰，因爲它只包含浮動元素。

.nav { 

    list-style: none; 
    width: 1100px; 
    margin: auto; 
    text-align: center; 
    overflow: auto; 
}

此外，將其添加到.nav_contain中也有類似的效果。

來源

2013-12-08 22:00:58

一般儘量避免像

width: 1100px; //(1)

固定值，可以通過

width: 90%; //(2)

的(1)被破壞的其他的分辨率比你的網站更換爲例子。使用(2)來避免它。

試試此代碼： http://paste.debian.net/69881/

來源

2013-12-08 22:08:16

如何在HTML中對齊我的元素？

回答

相關問題