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>