1
私はウェブサイトのレイアウトを練習しており、Facebookのリンク先ページをコピーしようとしていました。パスワード入力の下に「忘れたアカウント」リンクを表示しようとするまでは大丈夫でした。何らかの理由で、電子メール入力をドラッグします。なぜ私は考えていない。私は間違って何をしていますか？パスワード入力で表示される「アカウントを忘れました」リンクを取得できません
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .group {
zoom: 1;
}
/* IE6 */
*:first-child+html .group {
zoom: 1;
}
/* IE7 */
.flex {
width: 100%;
}
[class*=col-] {
float: left;
padding: 12px;
/*margin: 0px -14px -14px -14px;*/
border: 1px orange solid;
}
.row:after {
content: " ";
clear: both;
display: block;
}
.container {
max-width: 1140px;
margin: 0em auto;
background-image: url(images/grid.png);
}
.col-1 {
width: 8.3333
}
.col-2 {
width: 16.6666%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 28.5714%;
}
.col-5 {
width: 41.6666%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.3333%;
}
.col-8 {
width: 66.6666%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.3333%;
}
.col-11 {
width: 91.6666%;
}
.col-12 {
width: 100%;
}
body {
background-color: green;
}
/*Header styles*/
#header-color-div {
background-color: #3C5A98;
}
header {
background-color: #3C5A98;
}
header h1 {
font-size: 34px;
font-weight: 900;
color: white;
margin: 0.5em 0em 0em 3em;
}
header form p {
color: white;
}
header form label input {
margin-top: 0.3em;
}
header form {
margin-left: 25%;
}
form span {
display: inline-block;
}<div id="header-color-div">
<div class="container">
<header class="row">
<div class="col-6">
<h1>Facebook</h1>
</div>
<div class="col-6">
<form class="" action="index.html" method="post">
<span>
<p>Email or phone</p>
<input type="email" name="email-1" placeholder="Email">
</span>
<span>
<p>Password</p>
<input type="password" name="password1" placeholder="password">
<span>
<input type="submit" value="Log-in"></input>
</span>
<div>
<a href="#">Forgot account?</a>
</div>
</span>
</form>
</div>
</header>
</div>
</div>
効果のスナップショットを投稿できますか？ – ouflak
2番目の@outflak - 現代のSafariブラウザではうまく見えます。 – Greenstick
ここに画像を投稿するにはどうすればいいですか？ 0.0 –