html - 输入字段相互碰撞/显示笨拙-6ren

html - 输入字段相互碰撞/显示笨拙

转载作者：行者123 更新时间：2023-11-28 06:45:01

我再次回来寻求一些急需的帮助。我正在尝试为学校编写网站代码，但遇到了麻烦。我的站点输入字段显示非常笨拙和/或相互碰撞。 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&nbsp;&ndash;&nbsp;June 8:</span>&nbsp; Daring Last Days of Blackbeard</p>
<p><span class="emphasis">June 11&nbsp;&ndash;&nbsp;June 29:</span>&nbsp; Ghost Stories of the Crystal Coast</p>
<p><span class="emphasis">July 3&nbsp;&ndash;&nbsp;July 20:</span>&nbsp; Beach Rental</p>
<p><span class="emphasis">July 23&nbsp;&ndash;&nbsp;August 10:</span>&nbsp; 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&ndash;January
</option>
<option>
2&ndash;February
</option>
<option>
3&ndash;March
</option>
<option>
4&ndash;April
</option>
<option>
6&ndash;May
</option>
<option>
6&ndash;June
</option>
<option>
7&ndash;July
</option>
<option>
8&ndash;August
</option>
<option>
9&ndash;Setember
</option>
<option>
10&ndash;October
</option>
<option>
11&ndash;November
</option>
<option>
12&ndash;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 &copy; 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/

文章推荐：使用共享库时未在此范围内声明 C++ [类]

文章推荐： javascript - 在 python django 中通过 url 发送数组

文章推荐： c++ - 如何释放共享指针的内存？

文章推荐： javascript - 在 Bootstrap 中组合固定宽度列和可变宽度列

html - 全屏/滚动背景性能问题？ (对不起，笨拙)
如果这是一个非常普遍的问题和/或我遗漏了一些非常明显的问题，我很抱歉。我的目标是让我的背景在整个屏幕上拉伸(stretch)，同时仍然与页面的其余部分一起滚动。我现在的代码实现了这一点，但并非没有严重

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 输入字段相互碰撞/显示笨拙

谢谢