- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我再次回来寻求一些急需的帮助。我正在尝试为学校编写网站代码,但遇到了麻烦。我的站点输入字段显示非常笨拙和/或相互碰撞。 jfiddle 链接是 https://jsfiddle.net/sr65ywpa/ .我查看了我所有的 HTML 代码,似乎没有任何异常。我相信这是我的 CSS 编码的一些问题。我找不到我哪里出错了,所以我想一双新的眼睛会有所帮助。
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Crystal Coast Theater - Tickets</title>
<link href="CSS/css.css" rel="stylesheet" type="text/css">
<link href="../CSS/css.css" rel="stylesheet" type="text/css">
<link href="CSS/print.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet" type="text/css">
</head>
<body>
<header style="text-align:center">
<a href="http://pbernhardt.mydevryportfolio.com/wgd232/index.html"><h1> Crystal Coast Theater.
</h1></a>
<nav style="text-align:center">
<a href="http://pbernhardt.mydevryportfolio.com/wgd232/index.html">Home</a>
<a href="http://pbernhardt.mydevryportfolio.com/wgd232/event.html">Events</a>
<a href="http://pbernhardt.mydevryportfolio.com/wgd232/ticket.html">Tickets</a>
<a href="http://pbernhardt.mydevryportfolio.com/wgd232/contact.html">Contact us</a>
</nav>
</header>
<div class="container cleatfix">
<aside class="col-1-3">
<h2>Upcoming events:</h2>
<p><span class="emphasis">May 22 – June 8:</span> Daring Last Days of Blackbeard</p>
<p><span class="emphasis">June 11 – June 29:</span> Ghost Stories of the Crystal Coast</p>
<p><span class="emphasis">July 3 – July 20:</span> Beach Rental</p>
<p><span class="emphasis">July 23 – August 10:</span> The Siege of Fort Macon</p>
</aside>
<section style="text-align:center" class="col-2-3">
<h2>Order Tickets</h2>
<form id="order info" action="thanks.html" method="post">
<fieldset>
<legend>Order Information</legend>
<label>
Email
<input type="email" id="email" required>
</label>
<label>
First Name
<input type="text" id="first_name" required>
</label>
<label>
Last Name:
<input type="text" id="last_name" required>
</label>
<label>
Address:
<input type="text" id="address" required>
</label>
<label>
Address 2(opt):
<input type="text" id="address2">
</label>
<label>
City:
<input type="text" id="city" required>
</label>
<label>
State:
<input type="text" id="state" required maxlength="2" placeholder="2-character code">
</label>
<label>
ZIP Code:
<input type="text" id="zip" placeholder="5 or 9 digits" pattern="^\d{5}(-\d{4})?" title="Either 5 or 9 Digits">
</label>
<label>
Phone Number:
<input type="tel" id="phone" required placeholder="999-999-9999" pattern="\d{3}[\-]\d{3}[\-]\d{4}" title="Must be in 999-999-9999 Format">
</label>
<label>
Number of Tickets
<input type="number" id="ticket_no" required min="1" max="10">
</label>
</fieldset>
<br>
<fieldset>
<legend>Payment Method</legend>
<div id="payment">
<label>
Bill Me
<input type="radio" id="bill_me" value="bill" name="payment_type">
</label>
<label>
Credit
<input type="radio" id="credit" value="credit" name="payment_type">
</label>
</div>
<label>
<select id="card_type">
<option>
Visa
</option>
<option>
Master Card
</option>
<option>
American Express
</option>
</select>
</label>
<label>
Credit Card Number:
<input type="text" id="card_number" required pattern="\d{16}" placeholder="16 Digits" title="Must be 16 Digits">
</label>
<label>
Expiration Date
<select id="exp_month">
<option>
1–January
</option>
<option>
2–February
</option>
<option>
3–March
</option>
<option>
4–April
</option>
<option>
6–May
</option>
<option>
6–June
</option>
<option>
7–July
</option>
<option>
8–August
</option>
<option>
9–Setember
</option>
<option>
10–October
</option>
<option>
11–November
</option>
<option>
12–December
</option>
</select>
</label>
<select id="exp_year">
<option>
2016
</option>
<option>
2017
</option>
<option>
2018
</option>
<option>
2019
</option>
<option>
2020
</option>
</select>
</fieldset>
<br>
<fieldset>
<input type="submit" id="submit" name="submit" value="Submit">
<input type="reset" id="reset" name="reset" value="Reset">
</fieldset>
</form>
</section>
</div>
<footer style="text-align:center">
<small>Copyright © 2015 Paul Bernhardt Enterprises</small>
</footer>
</body>
</html>
CSS:
@charset "utf-8";
/* temporary background color for testing purposes */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, el, 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;
}
/* My Styles */
aside {
padding: 3em;
background-color: #78a5cc;
}
body {
border: solid #84adcd .15em;
font-family: Arial, Hevetical, sans-serif;
font-size: 100%;
background-color: #a39b90;
width: 80% margin: 0 auto;
}
#btn input {
width: 10em;
margin-left: 8em;
}
.container {
overflow: hidden;
}
.col-1-3 {
width: 32%;
float: left;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
.col-2-3 {
width: 65% float: left;
}
.cleafix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
clear: both;
}
#exp_month {
width: 7em;
}
#exp_year {
width: 5em;
}
fieldset {
margin-bottom: .5em;
padding: .5em 1em;
border: .1em solid lightgrey;
}
footer {
padding: 3em;
background-color: #a39b90;
text-align: center;
}
form {
margin: 0 1em;
}
h1, h2, h3 {
padding-bottom: 1em;
}
h1 {
font-size: 250%;
color: #224d6f;
font-family: 'Dancing Script', cursive;
}
h1 a {
text-decoration: none;
}
h2 {
font-size: 150%;
}
h3 {
font-size: 110%;
font-weight: bold;
}
header, section, footer, aside {
padding: .5em
}
header {
padding: 3em;
height: 330px;
margin: 0;
background-color: #a39b90;
position: relative;
background-image: url(/images/CrystalCoastBanner.jpg);
background-repeat: no-repeat;
background-image: url(../images/CrystalCoastBanner.jpg);
background-repeat: no-repeat;
}
iframe {
float: right;
width: 500px;
heigt: 370px;
margin: 2em .5em;
}
input, select {
width: 20em;
margin-left: 0.5em;
margin-bottom: 0.5em;
}
input:required:invalid {
border: 2px solid darkblue;
box-shadow: none;
}
input:required:valid {
border: 1px solid black;
}
legend {
font-weight: bold;
}
label {
float: left;
width: 10em;
text-align: right;
}
.main_img {
height: 225px;
margin: 0 .5em;
float: right
}
nav {
position: absolute;
bottom: 0;
left: 0;
margin-bottom: 1em;
}
nav a {
padding: .25em 5em;
}
nav a:hover {
font-size: larger;
}
#payment {
margin: 0 auto 1em;
}
#payment label {
float: none;
}
#payment input {
width: auto;
margin-left: 8em;
}
section {
padding: 3em;
overflow: hidden;
min-height: 20em
}
#ticket_no {
width: 5em;
}
-黑暗克星
最佳答案
您应该尽量将网站的不同组件包装在 div
中,因为随着代码量的增加,它们将变得更易于管理。我在 fieldset
周围包裹了一个 div
,给它一个包裹类。
<fieldset>
<div class="wrap">
<legend>Order Information</legend>
<div>
<label>Email
<input type="email" id="email" required>
</label>
</div>
.
.
.
</div> <!-- closing div of wrap -->
<fieldset>
CSS
.wrap{
display: block;
clear: both;
overflow:hidden;
}
.wrap input,select{
max-width:100px;
margin:5px;
}
您可以尝试使用像bootstrap 这样的前端框架。它带有一组预定义的 css 样式,这将使您的事情变得容易得多。
这是更新的 fiddle .
关于html - 输入字段相互碰撞/显示笨拙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34093772/
在有些场景下,我们需要对我们的varchar类型的字段做修改,而修改的结果为两个字段的拼接或者一个字段+字符串的拼接。 如下所示,我们希望将xx_role表中的name修改为name+id。
SELECT incMonth as Month, SUM( IF(item_type IN('typ1', 'typ2') AND incMonth = Month, 1, 0 ) )AS
我最近读到 volatile 字段是线程安全的,因为 When we use volatile keyword with a variable, all the threads read its va
我在一些模型中添加了一个 UUID 字段,然后使用 South 进行了迁移。我创建的任何新对象都正确填充了 UUID 字段。但是,我所有旧数据的 UUID 字段为空。 有没有办法为现有数据填充 UUI
刚刚将我的网站从 mysql_ 更新为 mysqli,并破坏了之前正常运行的查询。 我试图从旋转中提取 id,因为它每次都会增加 1,但我不断获取玩家 id,有人可以告诉我我做错了什么吗?我尝试了将
我在 Mac OS X 上使用带有 Sequel Pro 的 MySQL。我想将一个表中的一个字段(即名为“GAME_DY”的列)复制到另一个名为“DAY_ID”的表的空字段中。两个表都是同一数据库的
问题: 是否有可能有一个字段被 JPA 保留但被序列化跳过? 可以实现相反的效果(JPA 跳过字段而序列化则不会),如果使用此功能,那么相反的操作肯定会很有用。 类似这样的事情: @Entity cl
假设我有一个名为“dp”的表 Year | Month | Payment| Payer_ID | Payment_Recipient | 2008/2009 | July
我将尝试通过我的 Raspberry Pi 接入点保证一些 QoS。 开始之前,我先动手:我阅读了有关 tcp、udp 和 ip header 的内容。在IP header description我看
如果你能弄清楚如何重命名这个问题,我愿意接受建议。 在 Dart 语言中,可以编写一个带有 final 字段的类。这些是只能设置的字段构造函数前 body 跑。这可以在声明中(通常用于类中的静态常量)
你怎么样? 我有两个带有两个字段的日期选择器 我希望当用户选择 (From) 时,第二个字段 (TO) 将是 next day 。比如 booking.com 例如:当用户选择From 01-01-2
我想我已经看到了这个问题的一些答案,这些答案可能与我需要的相差不远,但我对 mysql 的了解还不够确定,所以我会根据我的具体情况提出问题。 我有一个包含多个表的数据库,为此,如果“image”表上的
我在 mySQL 数据库中有 2 个表: customers ============ customer_id (1, 2 ) customer_name (john, mark) orders ==
我正在开发一个员工目标 Web 应用程序。 领导/经理在与团队成员讨论后为他们设定目标。这是一年/半年/季度,具体取决于组织遵循的评估周期。 现在的问题是添加基于时间段的字段或存档上一季度/年度数据的
我正在寻找允许内容编辑器从媒体库中选择多个文件的东西,这些文件将在渲染中列出。他们还需要能够上传文件和搜索。它必须在页面编辑器(版本 8 中称为体验编辑器)中工作。 到目前为止我所考虑的: 一堆文件字
现在,我有以下由 original.df %.% group_by(Category) %.% tally() %.% arrange(desc(n)) 创建的 data.frame。 DF 5),
我想知道是否有一些步骤/解决方案可以处理错误消息并将它们放入 Pentaho 工具中的某个字符串或字段中?例如,如果连接到数据库时发生某些错误,则将该消息从登录到字符串/字段。 最佳答案 我们在作业的
如何制作像短信应用程序一样的“收件人”字段?例如,右侧有一个“+”按钮,当添加某人时,名称将突出显示并可单击,如圆角矩形等。有没有内置的框架? 最佳答案 不,但请参阅 Three20 的 TTMess
是否可以获取记录的元素或字段的列表 通过类型信息类似于类的已发布属性的列表吗? 谢谢 ! 最佳答案 取决于您的delphi版本,如果您使用的是delphi 2010或更高版本,则可以使用“新rtti”
我正在构建一个 SQLite 数据库来保存我的房地产经纪人的列表。我已经能够使用外键来识别每个代理的列表,但我想在每个代理的记录中创建一个列表;从代理商和列表之间的一对一关系转变为一对多关系。 看这里
我是一名优秀的程序员,十分优秀!