1
プロジェクトを正しく表示できません。2番目のボックスが最初のボックスの右側に表示されるはずですボックス。私はIDの日を見てみたので、これがHTMLかCSSの問題かどうか分かりませんし、何か間違っているようには見えません。しかし、私はそこでミスをしている可能性があります。もし誰かがこれに対する解決策を持っていればそれは非常に感謝されるだろう、私に知らせてください。ありがとうございました。手元のプロジェクト7-2曜日のボックス下にある日付を選択
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Hands-on Project 7-2</title>
<link rel="stylesheet" href="styles.css" />
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<header>
<h1>
Hands-on Project 7-2
</h1>
</header>
<article>
<h2>Day of the Week Lookup</h2>
<form>
<fieldset>
<label for="dateSelected">
Select a date
</label>
<input type="date" id="dateSelected" />
</fieldset>
<fieldset class="button">
<button type="button" id="determineDay">Find day</button>
</fieldset>
<fieldset>
<p>Day of the Week</p>
<p id="day"></p>
</fieldset>
</form>
</article>
<script>
var selection = document.getElementById("dateSelected");
var result = document.getElementById("day");
var allDaysofWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var selectedDate;
var dayOfWeekNumber;
var dayOfWeekName;
function lookUpDay() {
selectedDate = new Date(selection.value);
selectedDate.setUTCHours(12);
dayOfWeekNumber = selectedDate.getUTCDay();
dayOfWeekName = allDaysofWeek[dayOfWeekNumber];
result.innerHTML = dayOfWeekName;
}
// add event listener to Find day button and clear form
function createEventListener() {
var submitButton = document.getElementById("determineDay");
if (submitButton.addEventListener) {
submitButton.addEventListener("click", lookUpDay, false);
}
else if (submitButton.attachEvent) {
submitButton.attachEvent ("onclick", lookUpDay);
}
document.getElementById("dateSelected").value = "";
// clear last starting value on reload
document.getElementById("day").innerHTML = "";
// clear previous results on reload
}
if (window.addEventListener) {
window.addEventListener("load", createEventListener, false);
}
else if (window.attachEvent) {
window.attachEvent ("onload", createEventListener);}
</script>
</body>
</html>
/* apply a natural box layout model to all elements */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* reset rules */
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;
max-width: 600px;
background: white;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
-webkit-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1),
0px 10px 10px rgba(50, 50, 50, 1),
-10px 0px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 10px 0px 10px rgba(50, 50, 50, 1),
0px 10px 10px rgba(50, 50, 50, 1),
-10px 0px 10px rgba(50, 50, 50, 1);
box-shadow: 10px 0px 10px rgba(50, 50, 50, 1),
0px 10px 10px rgba(50, 50, 50, 1),
-10px 0px 10px rgba(50, 50, 50, 1);
}
ol, ul {
list-style: none;
}
/* page header */
header {
background: #04819E;
width: 100%;
color: #FFFFFF;
font-size: 48px;
text-align: center;
line-height: 1.5em;
border-bottom: 1px solid black;
}
/* main content */
article {
text-align: center;
background: ivory;
padding: 20px;
}
article h2 {
font-weight: bold;
font-size: 24px;
padding: 10px;
}
/* form */
form {
padding: 10px;
height: 145px;
}
fieldset {
margin-bottom: 10px;
position: relative;
padding: 2.5em 1em 0.5em 1em;
background: #e3d5ba;
float: left;
width: 40%;
height: 125px;
}
fieldset.button {
width: 20%;
}
input {
font-size: 1.1em;
width: 4em;
clear: left;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
input:focus {
background: #e3d5ba;
}
label {
display: block;
}
input, label, button, form p {
margin: 5px 10px;
}
p {
clear: left;
}
#dateSelected {
width: 180px;
}
#day {
width: 120px;
font-size: 1.1em;
height: 1.6em;
background: white;
padding: 0.2em;
margin: 10px auto;
border: 1px solid rgb(164,164,164);
}
にそれらを個別に設定するので
formに背景、パディングとマージンを移動することができます。あなたは問題を再現する[mcve]を提供しましたか？ –Verifiable問題は、すべてのブラウザに表示されます –
styles.cssにCSSがありますか？ –