0
我的網站的側邊欄菜單包含三個社交媒體網站的鏈接。當您將鼠標懸停在「聯繫人」上時，這些鏈接將顯示在下拉框中。我已經把鏈接放在自己的部門中，這樣我就可以單獨定製它們，並注意到無論我改變什麼，div中都有額外的空間，就好像我爲鏈接添加了邊距。我可以更改寬度，但每個框中的文本上下都有空格。我希望空間不見了，結果只有3行文字坐在對方下面，而不是3格。我做錯了什麼？我應該使用別的東西而不是分區嗎？另外，我在鏈接上添加了一個粉紅色的邊框，以增加可見空間。我無法擺脫的部門之上和之下的額外空間？
html {
background-color: #05061A;
min-height: 200%;
}
h1 {
font-family: 'Lato Bold 700', sans-serif;
font-size: 7.20vw;
background: -webkit-linear-gradient(top, #D2DFF0, #7D81BE, #05061A);
background: -moz-linear-gradient(top, #D2DFF0, #7D81BE, #05061A);
background: -o-linear-gradient(top, #D2DFF0, #7D81BE, #05061A);
background: linear-gradient(to bottom, #D2DFF0, #7D81BE, #05061A);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: none;
margin: 0%;
text-shadow: 0 0 1px transparent;
transition: text-shadow 0.35s ease;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: transparent;
-webkit-fill-color: transparent;
}
h1:hover {
text-shadow: 0 0 1px #D2DFF0;
transition: text-shadow 0.35s ease;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
}
h3 {
font-family: 'Pontano Sans', sans-serif;
font-size: 1.60vw;
color: #7D81BE;
text-decoration: none;
-webkit-transition: color 0.10s;
-moz-transition: color 0.10s;
-ms-transition: color 0.10s;
-o-transition: color 0.10s;
transition: color 0.10s;
padding: none;
margin: 0px;
}
h3:hover {
color: #D2DFF0;
}
h4 {
color: #7D81BE;
font-family: 'Pontano Sans', sans-serif;
font-size: 1vw;
}
h5 {
color: #7D81BE;
font-family: 'Pontano Sans', sans-serif;
font-size: 1vw;
padding: none;
margin: none;
}
h5:hover {
color: #D2DFF0;
}
h6 {
color: #7D81BE;
font-family: 'Pontano Sans', sans-serif;
font-size: 0.8vw;
}
h7 {
color: #D2DFF0;
font-family: 'Pontano Sans', sans-serif;
font-size: 1.60vw;
padding: none;
margin: none;
}
h8 {
font-family: 'Pontano Sans', sans-serif;
font-size: 1.40vw;
color: #D2DFF0;
text-decoration: none;
-webkit-transition: color 0.10s;
-moz-transition: color 0.10s;
-ms-transition: color 0.10s;
-o-transition: color 0.10s;
transition: color 0.10s;
position: absolute;
margin-top: -5%;
margin-left: -10.9%;
min-width: 15vw;
}
p {
color: #D2DFF0;
font-family: 'Pontano Sans', sans-serif;
font-size: 1.1vw;
margin-top: none;
margin-bottom: none;
}
a {
font-family: 'Pontano Sans', sans-serif;
color: #7D81BE;
text-decoration: none;
-webkit-transition: color 0.10s;
-moz-transition: color 0.10s;
-ms-transition: color 0.10s;
-o-transition: color 0.10s;
transition: color 0.10s;
}
a:hover {
color: #D2DFF0;
}
a:visited {
color: #7D81BE;
}
div {
padding: 0%;
margin: 0%;
}
#sidebar {
text-align: center;
align-content: center;
width: 22%;
height: auto;
float: left;
top: 6%;
left: 4%;
position: fixed;
background: -webkit-linear-gradient(bottom, #0C1033, #05061A);
background: -moz-linear-gradient(bottom, #0C1033, #05061A);
background: -o-linear-gradient(bottom, #0C1033, #05061A);
background: linear-gradient(to top, #0C1033, #05061A);
}
#sidebarart {
padding: 0% 5% 0% 5%;
margin: 0px;
width: 80%;
height: auto;
}
#gallery {
width: 70%;
height: auto;
position: relative;
float: right;
top: 0px;
bottom: 0px;
left: 0px;
right: 4vw;
align-content: center;
text-align: center;
}
.album {
display: block;
padding: none;
margin: 5% 5% 20% 5%;
max-width: 90%;
height: auto;
overflow: auto;
-webkit-box-shadow: 0px 0px 30px 4px #05061A;
-moz-box-shadow: 0px 0px 30px 4px #05061A;
box-shadow: 0px 0px 30px 4px #05061A;
transition: box-shadow 0.60s ease;
border: 2px solid blue;
}
.album:hover {
-webkit-box-shadow: 0px 0px 30px 4px #D2DFF0;
-moz-box-shadow: 0px 0px 30px 4px #D2DFF0;
box-shadow: 0px 0px 30px 4px #D2DFF0;
transition: box-shadow 0.35s ease;
}
/* Dropdown Button */
.dropbtn {
position: relative;
background-color: transparent;
padding: 0px;
border: none;
cursor: pointer;
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: block;
float: inherit;
width: 100%;
padding: 0px;
margin-left: auto;
margin-right: auto;
margin-top: none;
margin-bottom: none;
height: auto;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
background-color: transparent;
width: auto;
padding: 0px;
border: none;
}
/* Content inside the dropdown */
.dropdown-content {
float: left;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
margin-top: none;
margin-bottom: none;
width: auto;
height: 10%
}
.link {
display: block;
max-width: auto;
float: left;
border: 1px solid pink;
line-height: 5%;
}<!DOCTYPE html>
<head>
<title>L4-E</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Izzy Palmer">
<meta name="description" content="L4-E Music">
<meta name="keywords" content="Music, L4-E">
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="question.css">
<link href="https://fonts.googleapis.com/css?family=Lato|Pontano+Sans" rel="stylesheet">
</head>
<figure>
<div class="sidebarbox" id="sidebar">
<header>
<a href="index.html">
<h1>L4-E</h1>
</a>
</header>
<img src="images/Sidebar-art.PNG" id="sidebarart" alt="Sidebar Art"><br>
<div class="dropdown">
<button class="dropbtn"><h3>Bio</h3></button>
<div class="dropdown-content">
<p>this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this is my bio.this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this
is my bio.</p>
</div>
</div>
<div class="dropdown">
<button class="dropbtn"><h3>Contacts</h3></button>
<div class="dropdown-content">
<div class="link">
<a href="#" target="_blank">
<h5>Facebook</h5>
</a>
</div><br>
<div class="link">
<a href="#" target="_blank">
<h5>Twitter</h5>
</a>
</div><br>
<div class="link">
<a href="https://soundcloud.com/l4-e" target="_blank">
<h5>Soundcloud</h5>
</a>
</div>
</div>
</div>
</div>
</figure>
在Firefox，Chrome和Mac上的Safari，有這些鏈接之間沒有空格... – Johannes