0
私はウェブサイトの連絡先ページを作成しています。小さな「ソーシャルメディアボタン」を電子メールボックスのすぐ下に移動しようとしていますが、わかりません。 ご協力いただきありがとうございます。以下は要素の位置を調整する
私のCSSは& HTMLです：今のところ、それは大きな下マージン（200pxの）
を持っているので、それがなければならない、formの
body {
font-family: 'Raleway', sans-serif;
background:url("../images/example.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
}
form {
max-width:420px;
margin:200px auto;
}
.feedback-input {
color:white;
font-family: "Avenir", Arial, sans-serif;
/* font-weight:500;*/
font-size: 18px;
border-radius: 5px;
line-height: 22px;
background-color: transparent;
border:2px solid #ffe6f0;
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width:100%;
box-sizing: border-box;
outline:0;
}
.feedback-input:focus { border:2px solid #ff3385; }
textarea {
height: 150px;
line-height: 150%;
resize:vertical;
}
[type="submit"] {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
background:#ffe6f0;
border-radius:5px;
border:0;
cursor:pointer;
color:#555;
font-size:24px;
padding-top:10px;
padding-bottom:10px;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
[type="submit"]:hover { background:#ff3385; color:white;}
/*SOCIALS*/
.wrapper {
padding: 20px;
text-align: center;
}
.box {
display: inline-block;
top:10px;
width: 50px;
height: 50px;
/*changes distance between apps*/
margin: 0px 19px;
line-height: 50px;
font-family: 'Avenir';
font-size: 28px;
text-align: center;
color: #555;
border-radius: 10px;
background: #eee;
overflow: hidden;
cursor: pointer;
transition: .30s;
}
.box:hover {
transition: .30s;
color: white;
}
#facebook:hover {
background-color: #3a5795;
}
#insta:hover {
background-color: #c32594;
}
#vimeo:hover {
background-color: #00adee;
}
#linkedin:hover {
background-color: #007bb6;
}
#tumblr:hover {
background-color: #314358;
}
/*NAV BAR*/
/*style of the button*/
.dropbtn{
background-color: rgba(255,255,255,0);
color: white;
/* margin:0 auto;*/
font-size: 16px;
border: none;
cursor: pointer;
}
/*the div that controls the position of menu content*/
.dropdown {
position: fixed;
left: 0;
top: 0;
display: inline-block;
}
/*dropdown content*/
.dropdown-content {
/*font-family: ;*/
display: none;
/* right: 0;*/
background-color: #f9f9f9;
max-width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/*links inside of dropdown*/
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*change color of links on hover*/
.dropdown-content a:hover {background-color:#ffe6f0}
/*show menu on hover*/
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:active .dropdown-content{
background-color:red;
}
/*change the background color of dropdown button when content is shown*/
.dropdown:hover .dropbtn {
background-color: #ff3385;
}<!DOCTYPE html>
<html>
<title>Example || Contact</title>
<link rel="stylesheet" href="../css/contact.css">
<body>
<div class="dropdown">
<button class="dropbtn"><font size="15"> ☰ </font></button>
<div class="dropdown-content" style="left:0;">
<a href="../index.html" class="active">Home ☜</a>
<a href="../html/about.html" class="active">About ☺</a>
<a href="../html/contact.html">Contact ☏</a>
<a href="../html/portfolio.html">Portfolio ♡</a>
</div>
</div>
<form action="mailto:[email protected]" method="post" enctype="text/plain">
<input type="text" name="name" class="feedback-input" placeholder="Name" />
<input type="text" name="email" class="feedback-input" placeholder="Email" />
<textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
<input type="submit" value="SUBMIT"/>
</form>
<div class="wrapper">
<div class="box" id="facebook"><a href="https://www.facebook.com"><img src= "../images/fb.png"> </a></div>
<div class="box" id="insta"><a href="https://www.instagram.com"> <img src= "../images/insta.png"> </a></div>
<div class="box" id="vimeo"><a href="https://www.vimeo.com"> <img src= "../images/vimeo.png"></a></div>
<div class="box" id="linkedin"><a href="https://www.linkedin.com"><img src= "../images/linkedin.png"></a></div>
<div class="box" id="tumblr"><a href="http://www.tumblr.com"><img src= "../images/tumblr.png"></a></div>
</div>
<link href="http://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
</body>
</html>