当前位置:  开发笔记 > 编程语言 > 正文

你能用CSS定位<br />吗?

如何解决《你能用CSS定位<br/>吗?》经验,为你挑选了6个好方法。

是否可以
使用CSS 定位换行符?

每次有一个换行符时我想要一条1px的虚线.我使用自己的CSS自定义网站,无法更改设置的HTML,否则我会使用其他方式.

我不认为这是可能的,但也许有人知道的方式.



1> Török Gábor..:

BR生成换行符,它只是一个换行符.由于此元素没有内容,因此只有少数样式适用于它,例如clearposition.您可以设置BR边框但不会看到它,因为它没有视觉尺寸.

如果你想在视觉上分开两个句子,那么你可能想要使用专门用于此目标的水平标尺.既然你不能改变标记,我恐怕只使用CSS你无法实现这一点.

看起来,它已经在其他论坛上讨论过了.从Re中提取:使用CSS设置BR元素的高度:

[T]他导致BR有点奇怪的状态,一方面它不被视为普通元素,而是作为生成内容中的\ A的实例,但另一方面它被视为一个普通的元素(有限的子集)允许CSS属性.

我还在CSS 1规范中找到了一个澄清(没有更高级别的规范提到它):

当前的CSS1属性和值无法描述'BR'元素的行为.在HTML中,'BR'元素指定单词之间的换行符.实际上,元素被换行符替换.CSS的未来版本可以处理添加和替换的内容,但基于CSS1的格式化程序必须特别处理'BR'.

格兰特瓦格纳的测试表明,没有办法BR像你可以用其他元素做的那样.还有一个在线网站,您可以在浏览器中测试结果.

更新

pelms做了一些进一步的调查,并指出 IE8(在Win7上)和Chrome 2/Safari 4b可以让你BR有点风格.事实上,我使用IE Net Renderer的IE8引擎检查了IE演示页面,但它确实有效.

更新2 C69做了一些进一步的调查,而且事实证明,你可以样式标记br相当严重(虽然不是跨浏览器),但是这不会影响断行本身,因为它似乎属于父容器.



2> Rok..:

尝试以下方法,我使用另一个高回报率的回复2将它放在一起,它对我来说非常有用:

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}



3> Bernard Sfez..:

您需要为
标签设置样式有一个很好的理由.

如果它是您不希望(或不能)更改的代码的一部分,并且您希望
不显示此特定内容.

.xxx br {display:none}

可以节省很多时间,有时也可以节省一天.



4> Grant Wagner..:

为了未来可能错过我评论的访客的利益:

br {
    border-bottom:1px dashed black;
}

不起作用.

它已在IE 6,7和8,火狐2,3&3.5B4,Safari浏览器3和4为Windows,歌剧9.6&10(阿尔法)和谷歌浏览器(版本2)进行了测试,并没有以任何的工作他们.如果将来有人发现某个浏览器确实支持某个
元素的边框,请随时更新此列表.

还要注意我尝试了很多其他的东西:

br {
    border-bottom:1px dashed black;
    display:block;
}

br:before { /* and :after */
    border-bottom:1px dashed black;
    /* content and display added as per porneL's comment */
    content: "";
    display: block;
}

br { /* and :before and :after */
    content: url(a_dashed_line_image);
}

其中,以下内容适用于Opera 9.6和10(alpha)(感谢porneL!):

br:after {
    border-bottom:1px dashed black;
    content: "";
    display: block;
}

当它仅在一个浏览器中支持时不是很有用,但我总是觉得看到不同的浏览器如何实现规范很有趣.


:没有内容之前不存在.添加`content:""; 显示:阻止`到第二个规则.

5> Roy Rico..:

我知道你不能编辑HTML,但如果你可以修改CSS,你可以添加javascript吗?

如果是这样,你可以包括jquery,那么你可以做




6> pelms..:
br { padding: 1px 8px; border-bottom: 1px dashed #000 }

在IE8中呈现如下...虽然在一个浏览器中没有很多用处.

IE 8截图

(注意我正在使用IE 8.0.7100(在Win7 RC上),如果这有任何区别)

也,

br:after { content: "..." }  
br { content: "" }`

要么,

br:after {
    border: 1px none black;
    border-bottom-style: dashed;
    content: "";
    padding: 0 6px 0;
}

br { content: "" }

在Chrome 2/Safari 4b中给出了一个虚线,但是丢失了换行符(除非有人能想出一种方法来重新引入它)使它变得无用.

例如
IE8测试,Chrome/Safari测试和其他测试

推荐阅读
喜生-Da
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有