Question

我有一个包含一些<a>元素的网页。当浏览器被放大时，元素彼此相邻，因为我想要它，但是当我重新调整浏览器的大小时，元素开始相互重叠。我应该做些什么？我在样式标签中尝试了position：fixed，absolute和relative，但没有令人满意的结果。如果浏览器重新调整大小，我希望能够滚动到不适合的部分。这是我的代码在一个html文件中：

<!DOCTYPE html>
<html>
<head>
<style>

body{
margin: 30px 0px 0px 0px;
}

#home{
    text-decoration: none;
    color:#000000;
    margin:  0px 10px 0px 200px;
    padding: 10px 50px;
    width:20px;
    border-radius:25px;
    background: linear-gradient(white, orange);
}

#proj{ 
    text-decoration: none;
    color:#000000;
    margin: 10px;
    padding: 10px 50px;
    width:20px;
    border-radius:25px;
    background: linear-gradient(white, orange);
}

#for{ 
    text-decoration: none;
    color:#000000;
    margin: 10px;
    padding: 10px 50px;
    width:20px;
    border-radius:25px;
    background: linear-gradient(white, orange);
}

#about{ 
    text-decoration: none;
    color:#000000;
    margin: 10px;
    padding: 10px 50px;
    width:20px;
    border-radius:25px;
    background: linear-gradient(white, orange);
}

</style>
<div id="heading">
<a href="#" id="home"><font face="arial">HOME</font></a>
<a href="#" id="proj"><font face="arial">PROJECTS</font></a>
<a href="#" id="for"><font face="arial">FORUM</font></a>
<a href="#" id="about"><font face="arial">ABOUT</font></a>
</div>
</head>
<body>
</body> 
</html>

Answer 1

这是使用解决方案的代码的简化版本......

HTML部分

<div id="heading">
<font face="arial">
    <a href="#" class="cls" id="home">HOME</a>
    <a href="#" class="cls" id="proj">PROJECTS</a>
    <a href="#" class="cls" id="for">FORUM</a>
    <a href="#" class="cls" id="about">ABOUT</a>
</font>
</div>

CSS部分

.cls{
    text-decoration: none;
    color:#000000;
    padding: 10px ;
    width:20px;
    border-radius:25px;
    background: linear-gradient(white, orange);

    //add this to solve your problem...
    line-height:3em;
    position:relative;
}

小提琴：DEMO

Answer 2

您需要使用媒体查询在不同的断点处调整CSS。以下是它的基本介绍：http://www.vanseodesign.com/web-design/media-query-breakpoints/

@media screen and (max-width: 768px) { // different CSS for screens smallers than 769px.
    #heading {    padding-left: 0;    }
    #heading a { margin:5px; width: 130px; }
}

我整理了一个小提琴，告诉你如何以及向你展示其他方法，包括摆脱字体标签。 http://jsfiddle.net/willthemoor/C4AGF/

Answer 3

使用line-height避免重叠：

<!DOCTYPE html>
<html>
<head>
<style>

body{
margin: 30px 0px 0px 0px;
}
ul li{
    list-style: none;
    float: left;
}
ul li a{
    text-decoration: none;
    color:#000000;
    padding: 10px 50px;
    width:20px;
    border-radius:25px;
    background: linear-gradient(white, orange);   
    line-height: 50px; 
}
#home{
    margin:  0px 10px 0px 200px;
}

#proj{ 
    margin: 10px;
}

#for{ 
    margin: 10px;
}
#about{ 
    margin: 10px;
}
</style>
<div id="heading">
    <ul>
        <li><a href="#" id="home"><font face="arial">HOME</font></a></li>
        <li><a href="#" id="proj"><font face="arial">PROJECTS</font></a></li>
        <li><a href="#" id="for"><font face="arial">FORUM</font></a></li>
        <li><a href="#" id="about"><font face="arial">ABOUT</font></a></li>
    </ul>
</div>
</head>
<body>
</body> 
</html>

Answer 4

这是使用解决方案的代码的简化版本......

css代码

#home {
    background: linear-gradient(#FFFFFF, #FFA500) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 25px;
    color: #000000;
    padding: 10px 50px;
   /* margin: 0 10px 0 200px;*/ //Remove Margin
    text-decoration: none;
    width: 20px; }

//add css to display button in the center of the page
#heading{
    margin: 0 auto;
    width: 720px; 
}

重叠的HTML元素

4 个答案: