Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何让多个haml行出现在同一行上?

如何让多个haml行出现在同一行上?
EN

Stack Overflow用户
提问于 2011-04-26 16:03:54
回答 2查看 4.6K关注 0票数 5

我有以下haml:

代码语言:javascript
运行
AI代码解释
复制
  9       %strong Asked by:   
 10       = link_to @user.full_name, user_path(@user)     
 11       .small= "(#{@question.created_at.strftime("%B %d, %Y")})" 

这当前将链接和日期放在不同的行上,而它应该看起来像"link ( date )“,并且date有一个小的类跨度.....

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-04-26 23:29:10

您的代码将生成类似以下html的内容:

代码语言:javascript
运行
AI代码解释
复制
<strong>Asked by:</strong>
<a href="userpath">User name</a>
<div class='small'>April 26, 2011</div>

当您使用类似于.small的东西(即使用点而不指定元素类型)时,haml会创建一个implicit div。由于div元素在默认情况下为block level elements,因此日期将位于新块中,因此将显示在新行中。为了让它出现在同一行上,您需要一个inline level element

您可以更改“小”类的css,使其显式地以内联方式显示,但是html已经提供了div的内联版本-- span,因此您可以将最后一行从

代码语言:javascript
运行
AI代码解释
复制
.small= "(#{@question.created_at.strftime("%B %d, %Y")})" 

代码语言:javascript
运行
AI代码解释
复制
%span.small= "(#{@question.created_at.strftime("%B %d, %Y")})" 

这将会给你

代码语言:javascript
运行
AI代码解释
复制
<strong>Asked by:</strong>
<a href="userpath">User name</a>
<span class='small'>April 26, 2011</span>

它们都是内联元素,因此将显示为一行。

至于在haml中将所有这些都放在同一行上,我认为用普通的haml语法是不可能的。Haml使用缩进和空格来确定要做什么,只有一行意味着没有缩进。

haml FAQ说:

表示文档结构的

和表示内联格式是两个截然不同的问题。Haml主要是为结构设计的,所以处理格式化的最好方法是把它留给为它设计的其他语言。

你似乎处在haml的边缘。如果你真的想在一行中完成所有的事情,你可以直接编写html:

代码语言:javascript
运行
AI代码解释
复制
<strong>Asked by:</strong> #{link_to @user.full_name, user_path(@user)} <span class="small">(#{@question.created_at.strftime("%B %d, %Y")})</span>

或者你可以创建一个帮助器来为你生成这个块。

票数 11
EN

Stack Overflow用户

发布于 2011-04-26 21:04:53

要使其显示在浏览器的同一行上,请使用%span.small,如上面的注释所示。

要在HTML输出的一行中完成所有这些操作,需要使用HAML语言中的whitespace removal语法。请理解,HTML输出中的换行符不会影响浏览器中的文本排列。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5793084

复制
相关文章
代码实现“按钮组允许多个按钮被堆叠在同一行上”
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。您可以通过 Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为。
好派笔记
2021/09/18
1.6K0
一行代码让matplotlib图表变高大上
matplotlib作为Python生态中最流行的数据可视化框架,虽然功能非常强大,但默认样式比较简陋,想要制作具有简洁商务风格的图表往往需要编写众多的代码来调整各种参数。
Feffery
2021/07/27
9940
一行代码让matplotlib图表变高大上
matplotlib作为Python生态中最流行的数据可视化框架,虽然功能非常强大,但默认样式比较简陋,想要制作具有简洁商务风格的图表往往需要编写众多的代码来调整各种参数。
派大星的数据屋
2022/04/03
6950
一行代码让matplotlib图表变高大上
Jquery如何删除table里面checkbox选中的多个行与多个列
(adsbygoogle = window.adsbygoogle || []).push({});
tianyawhl
2019/04/04
4.5K0
如何在同一IP地址上运行多个SSL证书?
什么是SNI?服务器名称指示是SSL的一个重要组成部分。SNI允许多个网站存在于同一个IP地址上。 如果没有SNI,每个主机名都需要自己的IP地址才能安装SSL证书。
亚洲诚信SSL
2019/07/08
1.7K0
如何在同一IP地址上运行多个SSL证书?
如何让减少行锁对性能的影响
InnoDB中会在需要的时候加上行锁,不是使用完立即释放,而是等待事务结束才释放,这就是两阶段锁。
用户7447819
2021/07/23
5650
Python print() 函数,在同一行打印
print() 函数是 Python 中的一个重要函数,因为它用于将 Python 输出重定向到终端或者重定向到文件。
润森
2022/09/22
2.7K0
Python print() 函数,在同一行打印
在同一行布局的技巧 原
例如上面的布局,我们可以使用里面元素浮动,外面的div高度为0的特点来布局,使2个div重叠在一起
tianyawhl
2019/04/04
5660
在同一行布局的技巧
                                                                            原
一行代码让你CSDN主页变为高大上
direction: 可设为 < up:向上 down:向下 left:向左 right:向右 > 默认为从右向左
苏州程序大白
2021/12/20
4690
一行代码让你CSDN主页变为高大上
如何在矩阵的行上显示“其他”【2】
这个显示结果虽然达到了基础的目的,但并不是很理想。很明显,我们想的是让others在最后一行:
陈学谦
2021/11/15
1.7K0
如何在矩阵的行上显示“其他”【1】
思路上其实非常简单:通过构建一个新的表,将销售额度量值放进去,排序,前10名用原先的类别,后面的都替换为others,拖到表中排序即可。
陈学谦
2021/11/15
2K0
Android ImageSpan与TextView同一行图片居中
在开发中常常会遇到标签(图片)+文字的需求,实现方式一般采用SpannableString的方式来实现。 这时候会遇到图片ImageSpan没有办法居中的问题。在解决这个问题之前,先学习字体属性Paint.FontMetrics。
用户3106371
2018/09/12
2.6K0
Android ImageSpan与TextView同一行图片居中
CSS 让div,span等块级、非快级元素排列在同一行
<div style="height: 40px;width: 80px;background-color: red" >
授客
2019/08/21
3.9K0
让人纠结的首行缩进
让人纠结的首行缩进 中文没有缩进,真心不好看。 具体原理见 http://neoear.com/2009/10/wordpress-indent/ 因为原作者的文章是09年写的,对增加wordpress按钮的第一种方法已经失效,而第二种方法要根据不同的对不同的主题要适当的改变一下。而且第一种方法对于离线编辑器没有作用。 首行缩进具体有3种方法。 一,方法1: 对wordpress自带的编辑器增加按钮,因为我用的是CKEditor,这方法不实用。PASS 二,方法2:
qinyang
2018/06/05
1.2K0
SQL"已更新或者删除的行值要么不能使该行成为唯一行,要么改变了多个行(X行)“解决办法
  这种问题大多是由于没有主键(PK)导致同一张表中存在若干条相同的数据。DBMS存储时,只为其存储一条数据,因为DBMS底层做了优化,以减少数据冗余。所以删除或更新一条重复数据就牵一发而动全身。
孙晨c
2019/09/10
3.7K0
SQL"已更新或者删除的行值要么不能使该行成为唯一行,要么改变了多个行(X行)“解决办法
这十二行代码是如何让浏览器爆炸的?
今天刷推特的时候发现 Cyber Security@cyber__sec 的推文让人眼前一亮:
哲洛不闹
2018/09/18
5220
这十二行代码是如何让浏览器爆炸的?
如何在同一台机器上安装多个版本的Java 顶
不久前,我写了一篇文章,Java Lambda表达式说明。对于我来说,使用Java 8探索这个概念很容易,因为它已经安装在我的项目中。但是在我目前的项目中,我们仍然使用Java 8,现在,我想升级并学习Java 11。然而,不幸的是,我无法安装它。
白石
2019/08/23
2.3K0
让Hive支持行级insert、update、delete
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wzy0623/article/details/51483674
用户1148526
2019/05/25
4.9K0
C# devExpress GridControl 行中行 子行 多级行
在工作中经常会碰到需要做行中行,多级行的情况,不熟的情况下,我也只能试着实现. 命名空间 using DevExpress.XtraEditors.Repository; using System.Data.SqlClient; 实现代码 一下实现的也只是一个demo,大家不要拘泥于数据 DB db = new DB(); DataSet ds = new System.Data.DataSet(); SqlCommand comm2 = new S
乔达摩@嘿
2020/09/11
1.2K0
C# devExpress GridControl 行中行 子行 多级行
厉害了,15 行代码让 iPhone 崩溃。。
一个名叫Sabri Haddouche的网络安全研究人员发推特说发现了苹果系统一个新的漏洞,可以使iPhone或Mac崩溃并重启。他们公布了一个只有15行代码的网页,访问这个页面就会让iPhone或iPad崩溃。
Java技术栈
2019/07/12
1.3K0
厉害了,15 行代码让 iPhone 崩溃。。

相似问题

让表单出现在同一行

12

你如何使文本和变量在haml中出现在同一行上?

23

如何让ASP.net对象出现在同一行上?

11

如何让单词站在同一行上

12

如何让多个形状出现在同一屏幕上?

118
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档