个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
问题是页脚的文本在此页面上左对齐，但在使用相同代码的任何其他页面上则没有。我一步一步地注释掉了每个部分，是 map img 导致了这个问题。我可以通过将页脚设置为 clear right 来解决这个问题，但这似乎完全弄乱了页脚的高度。我提供了一些屏幕截图来帮助证明我的意思。 
#container {
background-image: url(..//Images/backgroundPic.jpg);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
width: 1000px;
border-style: ridge;
border-width: 5px;
}
h1,
h2 {
text-decoration: underline;
}
p {
font-weight: bold;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
background-color: #F1EBEB;
}
/* Header */
#top {
padding: 0px;
margin: 0px;
background-color: white;
background-image: url(../images/tutorteam.png);
height: 50px;
width: 1000px;
font-size: 1em;
}
#top img {
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-right: 5px;
}
#details {
display: table;
padding: 10px;
}
#details p {
display: table-cell;
vertical-align: top;
padding: 3px;
}
div.tablerow {
display: table-row
}
div.tablerow p:first-child {
text-align: right;
}
#logo {
float: right;
margin-left: 4px;
margin-top: 2px;
}
#back {
float: left;
margin-left: 40px;
margin-top: 2px;
}
#main {
padding: 10px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
background-color: white;
}
#tableContainer {
display: table;
margin-left: auto;
margin-right: auto;
border-spacing: 10px;
font-size: 0.25em;
}
#footer {
display: table-row;
}
#tableCell {
display: table-cell;
vertical-align: top;
}
#dubaiMap {
float: right;
position: relative;
right: 20px;
top: -200px;
}
#signUp {
margin-left: 110px;
margin-bottom: 100px;
border: 0px;
padding: 0px;
height: 90px;
}
#submit {
float: right;
position: relative;
bottom: 60px;
left: 420px;
margin-left: 20px;
background-color: #4CAF50;
/* Green */
border: 2px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
textarea {
float: right;
position: relative;
bottom: 250px;
right: 175px;
border: 3px solid #4CAF50;
font-size: 14px
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sign Up</title>
<link type="text/css" rel="stylesheet" href="login.css">
</head>
<body>
<div id="container">
<section id="top">
<a href="../index.html">
<img id="back" src="../images/back.png" height="40px">
</a>
<img id="logo" src="../images/tutorTeamLogo.png" height="40px">
</section>
<section id="main">
<p>Are you a tutor or customer? please select the relevant option.</p>
<form>
<select name="user">
<option value="Customer">Customer</option>
<option value="Tutor">Tutor</option>
</select>
</form>
<form action="tutorSignUp.php" method="POST">
<p>Please complete to sign up.</p>
<section id="details">
<div class="tablerow">
<p>First name:</p>
<p>
<input type="text" name="firstName" value="">
</p>
</div>
<div class="tablerow">
<p>Last name:</p>
<p>
<input type="text" name="lastName" value="">
</p>
</div>
<div class="tablerow">
<p>Address:</p>
<p>
<input type="text" name="address" value="">
</p>
</div>
<div class="tablerow">
<p>city:</p>
<p>
<input type="text" name="city" value="">
</p>
</div>
<div class="tablerow">
<p>Zip:</p>
<p>
<input type="text" name="zip" value="">
</p>
</div>
<div class="tablerow">
<p>Telephone:</p>
<p>
<input type="tel" name="telephone" value="">
</p>
</div>
</section>
<img src="../Images/dubaiZones.png" id="dubaiMap">
<p>Tutoring level</p>
<select name="level">
<option value="Pre School">Pre School</option>
<option value="Primary School">Primary</option>
<option value="GCSE">GCSE</option>
<option value="A level">A Level</option>
<option value="Undergraduate">Undergraduate</option>
<option value="Post Graduate">Post Graduate</option>
</select>
<p>Subject specialism(s)</p>
<input type="checkbox" name="subject" value="English">English
<br>
<input type="checkbox" name="subject" value="Maths">Maths
<br>
<input type="checkbox" name="subject" value="Physics">Physics
<br>
<input type="checkbox" name="subject" value="Chemistry">Chemistry
<br>
<input type="checkbox" name="subject" value="Biology">Biology
<br>
<input type="checkbox" name="subject" value="History">History
<br>
<input type="checkbox" name="subject" value="Geography">Geography
<br>
<input type="checkbox" name="subject" value="Religious Studies">R.E.
<br>
<input type="checkbox" name="subject" value="French">French
<br>
<input type="checkbox" name="subject" value="German">German
<br>
<input type="checkbox" name="subject" value="Spanish">Spanish
<br>
<input type="checkbox" name="subject" value="Computing">Computing
<br>
<input type="checkbox" name="subject" value="Business">Business
<br>
<input type="checkbox" name="subject" value="Economics">Economics
<br>
<input type="checkbox" name="subject" value="Classics">Classics
<br>
<br>
<textarea id="textArea" name="comments" rows="10" cols="48">Additional Information...</textarea>
<input type="submit" value="Sign Up" id="submit">
</form>
</section>
<footer>
<table id="tableContainer">
<tr id="footer">
<td id="tableCell">Website design and coding provided by Technology in Learning 2016 Copyright Technology in Learning
<img id="til" src="../Images/company.png" height="12" width="12">
</td>
</tr>
</table>
</footer>
</div>
</body>
</html>最佳答案
我不理解使用表格来显示单行文本的必要性。您只需要使用带有 text-align: center;
.text-center {
text-align: center;
}<footer id="footer">
<p class="text-center">Website design and coding provided by Technology in Learning 2016 Copyright Technology in Learning
<img id="til" src="../Images/company.png" height="12" width="12">
</p>
</footer>另外，我认为您的问题是由于表格的使用造成的。我相信默认情况下表格单元格在左侧对齐文本，并且我没有看到任何 CSS 规则可以在您的代码中更改它。
关于html - CSS 页脚定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41628569/
25
4
0
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点？ .someClass { //apply rules to
在更新我的 css 之前，我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。 但是，如果元素中的某个属性弄乱了特定页面，而我不想只使用内联 CSS 在该页面中使用它怎么办
我刚刚发现了 initial-scale 元属性。 以前，我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素)，以便它们在桌面计算机的屏幕上显示得很好。然后，如果您使用的是
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。 现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗？我不想使用脚本
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页，我可以手动完成。但是有100页。有人有想法吗？ 最佳答案 就像有人说的那样，“
当我想从 Styled Components 迁移到 CSS Modules 时，出现了以下问题。 假设我有以下样式组件，它接受动态参数 offset和一个动态 CSS 字符串 theme : con
有没有办法将 CSS 类定义为与另一个类相等？例如，如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
我正在尝试制作一组按钮，这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据，然后我用它来显示按钮。 我的问题在于让按
浏览器是否在加载 CSS 文件时解析 CSS？还是在整个 CSS 文件被浏览器下载后才进行解析？不同浏览器的做法有区别吗？我在哪里可以找到这种底层信息？ 这个问题不是 Load and executi
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。 标题有点乱，我给大家看一下。假
我遇到了最奇怪的问题...... 在最简单的形式中，我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中，我已经大大减少了它) 当我查看页面的源代码时，我得到以下信息:
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间，min 文件不会与系统的其余部分一起发布。 我有很多 css
请告诉我 CSS 框架和 CSS 网格之间的区别。 最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途，例如 Hartija
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
我以前使用 bootstrap css import 很好。 但是我正在尝试使用 CSS 模块，所以我添加了几行。 { test: /\.css$/, use:
有没有办法在 css 选择器中创建一个 css 组。 例如: .SectionHeader { include: .foo; include: .bar; include: .
今天我学习了 CSS 中的两个概念，一个是 CSS 定位(静态、相对、绝对、固定)，另一个是 CSS Margin，它定义了元素之间的空间。 假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /
我是一名优秀的程序员,十分优秀！