div元素不能在HTML中工作

Question

這是我想要設計的頁面。我給你一幅畫的what I want：

所以我寫了下面的代碼。我將鏈接放在一個div元素和另一個div元素中的列表中，以便它們與塊元素相似並且位置相同。

但是，列表部分似乎從鏈接部分的相同位置開始。我把每個人的兩種不同背景顏色給你看。設計就像搞砸了，我無法弄清楚這裏有什麼問題。很明顯，div元素沒有完成我想要的工作。如何將鏈接部分放置在列表部分，以及我的代碼出了什麼問題？

我還有一個問題。我使用邊界半徑來包含單獨的鏈接並使其成爲循環。在我的電腦中，它們工作正常。但是，當我調整瀏覽器窗口大小時，它們變得像膠囊形狀。我應該怎麼做才能讓它們在任何時候都呈現圓形。

很抱歉的長期問題..

#links{ 
 
\t position:relative; 
 
\t margin:10px 0px 0px 0px; 
 
\t width:100%; 
 
\t left:9%; 
 
    background-color:blue; 
 
\t } 
 

 
a.separate_link{ 
 
\t float:left; 
 
\t width:10%; 
 
\t height:20%; 
 
\t padding: 0px; 
 
\t border-radius: 100px; 
 
\t margin:0px 10px 0px 10px; 
 
\t background-color:#ffffff; 
 
\t text-decoration:none; 
 
\t text-align:center; 
 
\t text-bottom:20px; 
 
\t color:#000000; 
 
\t font-size:50%; 
 
\t } 
 
div.gen_info{ 
 
\t background-color:yellow; 
 
\t padding:12px; 
 
\t color:#5E6063 
 
}

<div id="links"> 
 
\t <a href="#" id="link1"class="separate_link"><p>General Information</p></a> 
 
\t <a href="#" id="link2"class="separate_link"><p>Officials</p></a> 
 
\t <a href="#" id="link3"class="separate_link"><p>Achievements</p></a> 
 
</div> 
 

 
<div class="gen_info"> 
 
    <div id="listofgeninfo"> 
 
\t \t <ul> 
 
      <li><a href="index.html#finli">History</a></li> 
 
      <li><a href="index.html#finhistory">About</a></li> 
 
      <li><a href="index.html#finmarh">Information</a></li> 
 
      <li><a href="index.html#finhi">Location</a></li> 
 
\t \t </ul> 
 
</div>

Answer 1

你可以做到這一點有兩種方式：

1）添加overflow: hidden;到#links：

#links{ 
    position:relative; 
    margin:10px 0px 0px 0px; 
    width:100%; 
    left:9%; 
    background-color:blue; 
    overflow: hidden; 
} 

或2）添加:after僞元素的#links DIV後清除：

#links{ 
    position:relative; 
    margin:10px 0px 0px 0px; 
    width:100%; 
    left:9%; 
    background-color:blue; 
} 
    #links:after { 
     clear: both; 
     content: ''; 
     display: block; 
    } 

下面是使用僞元素的方法工作的例子：http://jsfiddle.net/eprwjxkf/

欲瞭解更多信息，你可能會發現頂部回答此問題有幫助：What methods of ‘clearfix’ can I use?

Answer 2

的問題是浮動。

一個clear屬性添加到內DIV：

#links{ 
 
\t position:relative; 
 
\t margin:10px 0px 0px 0px; 
 
\t width:100%; 
 
\t left:9%; 
 
    background-color:blue; 
 
\t } 
 

 
a.separate_link{ 
 
\t float:left; 
 
\t width:10%; 
 
\t height:20%; 
 
\t padding: 0px; 
 
\t border-radius: 100px; 
 
\t margin:0px 10px 0px 10px; 
 
\t background-color:#ffffff; 
 
\t text-decoration:none; 
 
\t text-align:center; 
 
\t text-bottom:20px; 
 
\t color:#000000; 
 
\t font-size:50%; 
 
\t } 
 
div.gen_info{ 
 
\t background-color:yellow; 
 
\t padding:12px; 
 
\t color:#5E6063; 
 
} 
 

 
#listofgeninfo { 
 
    clear: both; 
 
}

<div id="links"> 
 
\t <a href="#" id="link1"class="separate_link"><p>General Information</p></a> 
 
\t <a href="#" id="link2"class="separate_link"><p>Officials</p></a> 
 
\t <a href="#" id="link3"class="separate_link"><p>Achievements</p></a> 
 
</div> 
 

 
<div class="gen_info"> 
 
    <div id="listofgeninfo"> 
 
\t \t <ul> 
 
      <li><a href="index.html#finli">History</a></li> 
 
      <li><a href="index.html#finhistory">About</a></li> 
 
      <li><a href="index.html#finmarh">Information</a></li> 
 
      <li><a href="index.html#finhi">Location</a></li> 
 
\t \t </ul> 
 
</div>