css pre标签
浏览器:firfox49.0.2
在使用<pre>标签输出格式化文本的时候,遇到了一个小问题. 要在页面的底部输出两行文本,但是最后一行的文字总是距离屏幕的底部太大.下面图中的样子:
相关的代码:
<footer>
<div class="navbar-fixed-bottom">
<pre class="text-center" style="margin-bottom: 0px;">
住着抠门的老翁
email : 422615924@qq.com
</pre>
</div>
</footer>
刚开始以为是div和pre标签的样式导致的,所以通过下面的调试器查看了一下:
并没有发现pre.text-center的样式有其对应的样式规则.后来通过盒模型查看了一下,才发现原来是pre标签内文本的空格行导致的.将代码改成如下:
<footer>
<div class="navbar-fixed-bottom">
<pre class="text-center" style="margin-bottom: 0px;">
住着抠门的老翁
email : 422615924@qq.com</pre>
</div>
</footer>
</body>
浏览器查看网页:
解决问题.
css pre标签的更多相关文章
- 【HTML】让<pre>标签文本自动换行
利用<pre></pre>这个标签可以将其包起来的文字排版.格式,原封不动的呈现出来. 也就是说你输入的东西被原封不动的输出,包括你输入的空格之类的,不用 和<BR> ...
- pre标签
$(" .pop-info").html("<PRE>"+data.info+"<PRE>"): 数据库里的换行存的 ...
- pre标签内文本自动换行
pre标签内文本自动换行 给pre标签添加一个css样式 pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* ...
- 创建一个pre标签展开折叠的UI组件(原创)
这些天练习UI组件的编写,顺便模仿一个h5版本的pre标签收缩展开的效果组件: 兼容ie8.9,谷歌,火狐: 图片效果如下: demo.html代码: <!DOCTYPE html> &l ...
- 聊一聊HTML <pre>标签
聊一聊HTML <pre>标签 我们经常会在要保持文本格式的时候使用pre标签,比如当我们要展示源代码的时候,只要放一个pre标签,然后把源代码直接复制,粘贴,然后在页面上就可以保持好格式 ...
- 解决<pre>标签里的文本换行(兼容IE, FF和Opera等)
我们都知道<pre> 标签可定义预格式化的文本,一个常见应用就是用来表示计算机的源代码.被包围在 pre 元素中的文本通常会保留空格和换行符,但不幸的是,当你在<pre>标 ...
- <pre>标签让<textarea>标签的内容原样输出
当通过<textarea>插数据进数据的库,取出来后都变成一行变成,用这个<pre>标签能原样输入插入时的格式. 当时要对<pre>加一些CSS样式才行啦. 以下为 ...
- HTML中pre标签的用法
我们经常会在要保持文本格式的时候使用pre标签,比如当我们要展示源代码的时候,只要放一个pre标签,然后把源代码直接复制,粘贴,然后在页面上就可以保持好格式.不会像放在其它标签里那样,把换行和空格都自 ...
- <pre>标签的使用
做做笔记.碰见了一个网站,显示代码的时候自带语法高亮,这很新鲜.它的代码被pre标签包裹,原本以为pre标签下的所有的内容会以文本原来的样式输出,特意查了查发现它依然支持html标签. 先来个菜鸟教程 ...
随机推荐
- sql 函数 汉字转拼音
GO /****** Object: UserDefinedFunction [dbo].[fn_GetPy] Script Date: 2017/1/4 10:53:49 ******/ SET A ...
- request.getcontextPath() 详解
request.getcontextPath() 详解 文章分类:Java编程 <%=request.getContextPath()%>是为了解决相对路径的问题,可返回站点的根路径. 但 ...
- vs2010集成git指南
1.安装 Git Extensions 下载地址:http://gotgit.github.com/gotgithub/10-appendix/030-install-on-windows-cygw ...
- net MVC 重定向总结
[HttpPost] public ActionResult StudentList(string StudName, string studName, DateTime BirthDay, Form ...
- Spring MVC 处理静态资源不能访问问题
在web.xml文件中加入如下代码: <servlet-mapping> <servlet-name>default</servlet-name> <url- ...
- CSS div水平垂直居中和div置于底部
一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_c ...
- oracle普通用户登录em
刚新创建一个用户,登陆EM(Enterprise Manager) 如下提示: 应用程序要求的数据库权限超出了您当前具有的权限.有关特定版本的详细信息, 解决办法: 给登陆用户赋予 select_ca ...
- 【poj1737】 Connected Graph
http://poj.org/problem?id=1737 (题目链接) 题意 求n个节点的无向连通图的方案数,不取模w(゚Д゚)w Solution 刚开始想了个第二类斯特林数,然而并不知道怎么求 ...
- Alpha阶段第二次Scrum Meeting
情况简述 Alpha阶段第一次Scrum Meeting 敏捷开发起始时间 2016/10/21 00:00 敏捷开发终止时间 2016/10/22 00:00 会议基本内容摘要 汇报了已经完成的任务 ...
- 这些年MAC下我常用的那些快捷键
Command + H:隐藏窗口 Command + M:最小化窗口 Command + N:新建 Command + O:打开 Command + S:保存 Command + shift+S:另存 ...