- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我一直在开发一个联系系统 - 我让它工作,回复,一切 - 但边距太离谱了 - 见图片 - 有没有人知道我做错了什么?它也是居中的,我希望它在左边。
我在下面列出了我的 index.php 和 styles.css。我必须将它集成到现有网站中 - www.londonontariomortgages.ca/blog.html - 所以我正在考虑做 iFrame - 但是,当它超过边缘时它不会创建一个新行,它看起来很愚蠢。
索引.php
<?php require_once 'php/connect.php'; require_once 'php/functions.php'; ?>
<!doctype html>
<html>
<head>
<title>YouTube Comment System Series</title>
<meta charset="UTF-8" lang="en-US">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/global.js"></script>
</head>
<body>
<p>
<div class="page-container">
<?php
get_total();
require_once 'php/check_com.php';
?>
<form action="" method="post" class="main">
<label>enter a brief comment</label>
<textarea class="form-text" name="comment" id="comment"></textarea>
<br />
<input type="submit" class="form-submit" name="new_comment" value="post">
</form>
<?php get_comments(); ?>
</div>
</p>
</body>
</html>
样式.php
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
/* resets */
* {
margin:0px;
padding:0px;
box-sizing:border-box;
font-family:'Calibri', sans-serif;
outline:none;
}
/* Animations */
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
/* body, html */
html, body {
background-color:#edf1f5;
}
/* content */
.page-container {
width:80%;
height:auto;
min-height:100vh;
margin:0 auto;
padding:50px 10px 0px 10px;
}
.comment {
width:45%;
height:auto;
padding:7px 23px;
margin:0px auto;
margin-bottom:10px;
text-align:left;
}
.child {
margin-top:10px;
margin-left:30px;
padding-left:5px;
}
.child-comments {
border-left:1px solid rgba(1,1,1,0.2);
}
form.main {
width:45%;
margin:0 auto;
margin-top:5px;
}
.form-input {
border:1px solid rgba(1,1,1,0.3);
width:50%;
padding:4px 7px;
font-size:13px;
line-height:24px;
resize:none;
}
.form-text {
border:1px solid rgba(1,1,1,0.3);
width:100%;
padding:4px 7px;
margin-top:5px;
font-size:13px;
line-height:24px;
resize:none;
transition:ease 0.2s all;
outline:none !important;
}
.form-text-error {
border-color:rgba(237,28,36,0.7);
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
.form-text:focus {
border-color:rgba(0,114,188,0.7);
}
.form-submit {
text-transform: uppercase;
border:1px solid rgba(1,1,1,0.3);
cursor:pointer;
padding:5px 13px;
margin-top:5px;
}
/* fonts */
.user, .time {
display:inline-block;
}
.user {
font-size:13px;
color:#0072bc;
text-decoration: none;
word-break: break-all;
line-height:17px;
}
.time {
font-size:11px;
color:#b2b1b1;
transition:ease 0.2s all;
}
.comment:hover .time {
color:#767676;
}
.comment-text {
font-size:13px;
line-height:17px;
color:#222;
margin:0px 10px;
}
a {
font-size:11.2px;
text-transform: uppercase;
text-decoration: none;
color:#222;
cursor:pointer;
transition:ease 0.3s all;
}
a:hover {
color:#0072bc;
}
.link-reply {
color:#767676;
margin-left:20px;
}
h1 {
width:45%;
height:auto;
margin:0px auto;
font-size:16px;
font-weight:300;
text-transform: uppercase;
border-bottom:1px solid rgba(1,1,1,0.2);
}
label {
font-size:13px;
text-transform: uppercase;
vertical-align: bottom;
}
最佳答案
查看更新后的 CSS,我删除了 margin: auto
来自 .page-container
和 form.main
和“.comment”
这导致页面上的表单居中而不是默认的左对齐。
添加此 CSS 以修复文本未换行的问题
.comment-text {
font-size: 13px;
line-height: 17px;
color: #222;
margin: 0px 10px;
word-break: break-all;
}
您的评论没有换行,因为其中没有空格。因此,要打破其中没有空格的元素,您需要添加 word-break: break-all
明确破坏它们的属性。
在理想情况下,您的评论中肯定会有空格,您不需要它(断字),但是测试人员(测试您的网站)将使用任何虚拟数据对其进行测试,因此您需要做好准备并针对此问题普遍应用修复程序。
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
/* resets */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Calibri', sans-serif;
outline: none;
}
/* Animations */
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
/* body, html */
html,
body {
background-color: #edf1f5;
}
/* content */
.page-container {
width: 80%;
height: auto;
min-height: 100vh;
padding: 20px 10px 0px 10px;
}
.comment {
width: 45%;
height: auto;
padding: 7px 0;
margin-bottom: 10px;
text-align: left;
}
.child {
margin-top: 10px;
margin-left: 30px;
padding-left: 5px;
}
.child-comments {
border-left: 1px solid rgba(1, 1, 1, 0.2);
}
form.main {
width: 45%;
margin-top: 5px;
}
.form-input {
border: 1px solid rgba(1, 1, 1, 0.3);
width: 50%;
padding: 4px 7px;
font-size: 13px;
line-height: 24px;
resize: none;
}
.form-text {
border: 1px solid rgba(1, 1, 1, 0.3);
width: 100%;
padding: 4px 7px;
margin-top: 5px;
font-size: 13px;
line-height: 24px;
resize: none;
transition: ease 0.2s all;
outline: none !important;
}
.form-text-error {
border-color: rgba(237, 28, 36, 0.7);
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
.form-text:focus {
border-color: rgba(0, 114, 188, 0.7);
}
.form-submit {
text-transform: uppercase;
border: 1px solid rgba(1, 1, 1, 0.3);
cursor: pointer;
padding: 5px 13px;
margin-top: 5px;
}
/* fonts */
.user,
.time {
display: inline-block;
}
.user {
font-size: 13px;
color: #0072bc;
text-decoration: none;
word-break: break-all;
line-height: 17px;
}
.time {
font-size: 11px;
color: #b2b1b1;
transition: ease 0.2s all;
}
.comment:hover .time {
color: #767676;
}
.comment-text {
font-size: 13px;
line-height: 17px;
color: #222;
margin: 0px 10px;
}
a {
font-size: 11.2px;
text-transform: uppercase;
text-decoration: none;
color: #222;
cursor: pointer;
transition: ease 0.3s all;
}
a:hover {
color: #0072bc;
}
.link-reply {
color: #767676;
margin-left: 20px;
}
h1 {
width: 45%;
height: auto;
margin: 0px auto;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
border-bottom: 1px solid rgba(1, 1, 1, 0.2);
}
label {
font-size: 13px;
text-transform: uppercase;
vertical-align: bottom;
}
<html>
<head>
<title>YouTube Comment System Series</title>
<meta charset="UTF-8" lang="en-US">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/global.js"></script>
</head>
<body>
<p>
<div class="page-container">
<?php
get_total();
require_once 'php/check_com.php';
?>
<form action="" method="post" class="main">
<label>enter a brief comment</label>
<textarea class="form-text" name="comment" id="comment"></textarea>
<br />
<input type="submit" class="form-submit" name="new_comment" value="post">
</form>
<?php get_comments(); ?>
</div>
</p>
</body>
</html>
关于php - 无法正确获取边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50888659/
我在 JavaScript 文件中运行 PHP,例如...... var = '';). 我需要使用 JavaScript 来扫描字符串中的 PHP 定界符(打开和关闭 PHP 的 )。 我已经知道使
我希望能够做这样的事情: php --determine-oldest-supported-php-version test.php 并得到这个输出: 7.2 也就是说,php 二进制检查 test.
我正在开发一个目前不使用任何框架的大型 php 站点。我的大问题是,随着时间的推移慢慢尝试将框架融入应用程序是否可取,例如在创建的新部件和更新的旧部件中? 比如所有的页面都是直接通过url服务的,有几
下面是我的源代码,我想在同一页面顶部的另一个 php 脚本中使用位于底部 php 脚本的变量 $r1。我需要一个简单的解决方案来解决这个问题。我想在代码中存在的更新查询中使用该变量。 $name)
我正在制作一个网站,根据不同的情况进行大量 PHP 重定向。就像这样...... header("Location: somesite.com/redirectedpage.php"); 为了安全起见
我有一个旧网站,我的 php 标签从 因为短标签已经显示出安全问题,并且在未来的版本中将不被支持。 关于php - 如何避免在 php 文件中写入
我有一个用 PHP 编写的配置文件,如下所示, 所以我想用PHP开发一个接口(interface),它可以编辑文件值,如$WEBPATH , $ACCOUNTPATH和 const值(value)观
我试图制作一个登录页面来学习基本的PHP,首先我希望我的独立PHP文件存储HTML文件的输入(带有表单),但是当我按下按钮时(触发POST到PHP脚本) )我一直收到令人不愉快的错误。 我已经搜索了S
我正在寻找一种让 PHP 以一种形式打印任意数组的方法,我可以将该数组作为赋值包含在我的(测试)代码中。 print_r 产生例如: Array ( [0] => qsr-part:1285 [1]
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: What is the max key size for an array in PHP? 正如标题所说,我想知道
我正在寻找一种让 PHP 以一种形式打印任意数组的方法,我可以将该数组作为赋值包含在我的(测试)代码中。 print_r 产生例如: Array ( [0] => qsr-part:1285 [1]
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 9 年前。 Improve this ques
我在 MySQL 数据库中有一个表,其中存储餐厅在每个工作日和时段提供的菜单。 表结构如下: i_type i_name i_cost i_day i_start i_
我有两页。 test1.php 和 test2.php。 我想做的就是在 test1.php 上点击提交,并将 test2.php 显示在 div 中。这实际上工作正常,但我需要向 test2.php
我得到了这个代码。我想通过textarea更新mysql。我在textarea中回显我的MySQL,但我不知道如何更新它,我应该把所有东西都放进去吗,因为_GET模式没有给我任何东西,我也尝试_GET
首先,我是 php 的新手,所以我仍在努力学习。我在 Wordpress 上创建了一个表单,我想将值插入一个表(data_test 表,我已经管理了),然后从 data_test 表中获取所有列(id
我有以下函数可以清理用户或网址的输入: function SanitizeString($var) { $var=stripslashes($var); $va
我有一个 html 页面,它使用 php 文件查询数据库,然后让用户登录,否则拒绝访问。我遇到的问题是它只是重定向到 php 文件的 url,并且从不对发生的事情提供反馈。这是我第一次使用 html、
我有一个页面充满了指向 pdf 的链接,我想跟踪哪些链接被单击。我以为我可以做如下的事情,但遇到了问题: query($sql); if($result){
我正在使用 从外部文本文件加载 HTML/PHP 代码 $f = fopen($filename, "r"); while ($line = fgets($f, 4096)) { print $l
我是一名优秀的程序员,十分优秀!