Php 无法正确获取我的页边距
我一直在开发一个联系系统-我让它工作,回复,一切-但边距都很奇怪-见图片-有人知道我做错了什么吗?它也在中间,我希望它在左边 我在下面列出了我的index.php和styles.css。我必须把它整合到一个现有的网站上——www.londonontariostories.ca/blog.html——所以我想做iFrame——但是,当它超过边缘时,它看起来很傻,不会创建一个新的线条 index.phpPhp 无法正确获取我的页边距,php,css,Php,Css,我一直在开发一个联系系统-我让它工作,回复,一切-但边距都很奇怪-见图片-有人知道我做错了什么吗?它也在中间,我希望它在左边 我在下面列出了我的index.php和styles.css。我必须把它整合到一个现有的网站上——www.londonontariostories.ca/blog.html——所以我想做iFrame——但是,当它超过边缘时,它看起来很傻,不会创建一个新的线条 index.php <?php require_once 'php/connect.php'; require
<?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>
请参阅更新的CSS,我从.page容器和form.main和.comment中删除了margin:auto 这导致表单在页面上居中,而不是默认的左对齐 添加此CSS以修复文本未包装问题
.comment-text {
font-size: 13px;
line-height: 17px;
color: #222;
margin: 0px 10px;
word-break: break-all;
}
您的评论不会换行,因为其中没有空格。因此,若要打断其中没有空格的元素,需要添加单词break:break all属性以显式地打断它们
在理想的情况下,你的评论中肯定会有空格,你不需要它,但是测试你的网站的测试人员会用任何虚拟数据来测试它,所以你需要为此做好准备,并对这个问题应用修复程序
@进口urlhttps://fonts.googleapis.com/css?family=Open+Sans:300400600700;
/*重置*/
* {
边际:0px;
填充:0px;
框大小:边框框;
字体系列:“Calibri”,无衬线;
大纲:无;
}
/*动画*/
@关键帧抖动{
10%,
90% {
变换:translate3d-1px,0,0;
}
20%,
80% {
变换:translate3d2px,0,0;
}
30%,
50%,
70% {
变换:translate3d-4px,0,0;
}
40%,
60% {
变换:translate3d4px,0,0;
}
}
/*正文,html*/
html,
身体{
背景色:edf1f5;
}
/*内容*/
.页面容器{
宽度:80%;
高度:自动;
最小高度:100vh;
填充:20px 10px 0px 10px;
}
.评论{
宽度:45%;
高度:自动;
填充:7px0;
边缘底部:10px;
文本对齐:左对齐;
}
.孩子{
边缘顶部:10px;
左边距:30px;
左侧填充:5px;
}
.儿童评论{
左边框:1px实心rgba1,1,1,0.2;
}
主窗体{
宽度:45%;
边缘顶部:5px;
}
.表格输入{
边框:1px实心rgba1,1,1,0.3;
宽度:50%;
填充:4px7px;
字体大小:13px;
线高:24px;
调整大小:无;
}
.格式文本{
边框:1px实心rgba1,1,1,0.3;
宽度:100%;
填充:4px7px;
边缘顶部:5px;
字体大小:13px;
线高:24px;
调整大小:无;
过渡:缓解0.2s所有;
大纲:无!重要;
}
.表格文本错误{
边框颜色:rgba237,28,36,0.7;
动画:摇动0.82s立方贝塞尔。36、.07、.19、.97二者;
变换:translate3d0,0,0;
背面可见性:隐藏;
透视图:1000px;
}
.表格文本:焦点{
边框颜色:rgba0、114、188、0.7;
}
.表格提交{
文本转换:大写;
边框:1px实心rgba1,1,1,0.3;
光标:指针;
填充:5px13px;
边缘顶部:5px;
}
/*字体*/
使用者
.时间{
显示:内联块;
}
.用户{
字体大小:13px;
颜色:0072bc;
文字装饰:无;
单词break:打破一切;
线高:17px;
}
.时间{
字体大小:11px;
颜色:b2b1b1;
过渡:缓解0.2s所有;
}
。注释:悬停。时间{
颜色:767676;
}
.评论文本{
字体大小:13px;
线高:17px;
颜色:222;
利润率:0px 10px;
}
a{
字体大小:11.2px;
文本转换:大写;
文字装饰:无;
颜色:222;
光标:指针;
过渡:轻松0.3s全部;
}
a:悬停{
颜色:0072bc;
}
.link回复{
颜色:767676;
左边距:20px;
}
h1{
宽度:45%;
高度:自动;
保证金:0px自动;
字体大小:16px;
字体大小:300;
文本转换:大写;
边框底部:1px实心rgba1,1,1,0.2;
}
标签{
字体大小:13px;
文本转换:大写;
垂直对齐:底部对齐;
}
YouTube评论系统系列
输入简短的评论
您可以发布在浏览器中运行此php代码后形成的html吗。这将有助于解决这个问题->当超过边距时,它不会创建新行。在我看来,这可能是重复的,因为这个问题不是边距,而是超长的单词打破了容器的宽度…谢谢!我很感激——但是评论仍然没有出现在多行中——你介意快速看一下吗?我是这方面的新手,虽然我在一周的时间里已经取得了很大的进步,但我还是用了一个词:打破一切;关于注释文本。注释文本{字体大小:13px;行高:17px;颜色:222;边距:0px 10px;分词:全部分词;}请参阅更新的答案,此代码可能会回答问题,提供关于此代码为什么和/或如何回答此问题的其他上下文,可以提高其长期价值。@摩羯座:谢谢你,现在就可以了。请给我一些时间谢谢你-我真的很感谢你的帮助-如果我能麻烦你再给我一个建议的话 stion——我希望所有的评论都能直接进入我的页面——就在文本框下面——我的最终目标是将其合并到一个新的页面中,以便人们可以在博客上发表评论。你介意再看一眼吗?
.comment-text {
font-size: 13px;
line-height: 17px;
color: #222;
margin: 0px 10px;
word-break: break-all;
}