手把手项目7-2周日框下面选择一个日期
手把手项目7-2周日框下面选择一个日期
提问于 2017-03-08 01:26:54
我在正确显示项目时遇到了问题，似乎第二个框位于第一个框的下方，而它应该出现在框的右侧。我不确定这是HTML的问题还是CSS的问题，因为我试过查看ID日，它似乎没有任何问题。但我可能在这方面犯了个错误。如果有人有一个解决方案，这将非常感谢，请让我知道。谢谢。
<!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);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2017-03-08 01:59:59
我将在form上使用display: flex，这将把fieldset放在一行中，您可以使用flex布局属性对其进行控制。然后，您可以将背景、填充和边距移动到form，而不必在fieldset的
/* 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;
display: flex;
align-items: center;
background: #e3d5ba;
padding: 2.5em 0 1em;
}
fieldset {
position: relative;
width: 40%;
}
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);
}<!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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42654494
复制相关文章
相似问题
腾讯云开发者
