重疊HTML元素

我有一個網頁與一些<a>元素。當瀏覽器被放大時，元素彼此相鄰，因爲我想要它，但是當我重新調整瀏覽器的大小時，元素開始彼此重疊。我應該做些什麼？我試過位置：固定，絕對和相對的風格標籤，但沒有令人滿意的結果。如果瀏覽器被重新調整大小小，我想能夠滾動到可能不適合在零部件這是我在一個HTML文件中的代碼：重疊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>

來源

2014-03-01 Jason Samuels

爲什麼你的元素在''而不是''？另外，爲什麼當每個元素的實際設置相同時，基於每個id定義單獨的CSS？使用一個普通的類。（話說回來，'display：inline-block'對於你的錨似乎解決了大部分問題：http://jsfiddle.net/WWL73/ – nnnnnn

一個可能的解決方案：試着指定包裝div的寬度，即，添加像這樣的CSS：'#heading {min-width：950px; }'。這可能正是你需要的。 – acdcjunior

這裏被簡化了解決方案代碼的版本...

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

來源

2014-03-01 06:23:10

你要使用媒體查詢在不同的斷點來調整你的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/

來源

2014-03-01 06:24:59 Will

使用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>

來源

2014-03-01 06:25:16 defool

這裏被簡化了解決方案代碼的版本...

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

來源

2014-03-01 06:52:08 user3322300

回答

相關問題