如何使用CSS模拟<br/>（br标签）？

CSS：

.top, .title { 
font-weight: bold; 
} 
.bottom, .Content { 
}

HTML：

<span class='title'>Title</span> 
<br/> 
<span class='Content'>Content</span> 
<br/><br/>

我想用CSS等效替换<br/>标签，但我正在努力。我将不胜感激任何帮助。

我试过边缘底部，边缘顶部，线条高度，没有任何工作。

来源

2012-02-07 user717236

你会使用利润率，你是什么意思'没有它工作'。你的CSS类不涉及你的HTML标记。 – devdigital 2012-02-07 22:46:18

关于CSS类和HTML标记，您是正确的。我修改了这个问题。非常感谢您指出这一点。尽管如此，根据这个链接http://www.codertools.com/css_help_guide/css_z-index.aspx，Firefox对边距标签元素的边距与IE的边距不同。 – user717236 2012-02-08 14:24:38

<span>是一个内联元素，所以不能应用margin，但它可以采取padding - 给它像.title { padding: 10px 0; }，它会模拟一个段落，或者只是.title { display: block; }迫使接下来的事情去它下面。

来源

2012-02-07 22:48:07 Joe

使用display:block;上span，

，如：

.title, .Content { display:block; }

来源

2012-02-07 22:46:46 Shpetim

好了，问题是，你使用的是 “跨越”，这是一个内联标签。例如，您必须使用块元素才能使用margin-bottom。

你可以试试这个：

.top { 
    font-weight: bold; 
    display: block; 
} 
.bottom { 
    display: block; 
}

或者你也可以使用display：inline-block的;

来源

2012-02-07 22:47:04 Chris

display: block;但是，<span>在语义上可能是使用了错误的标签（是内联标签而不是块标签）; <div>可能是一个更好的匹配，并且附带了它已经显示为块的奖金。其他标签可能更合适。

来源

2012-02-07 22:47:29

语义上，您希望为标题和段落标记（p）使用标题标记（h1，h2等）作为内容。这两个都是块级元素，例如margin和line-height等。

A span标记是一个内联元素，它（对于所有意图和目的）意味着它意味着在块级元素的中间，而不会弄乱标记的其余部分。

如果你真的想保持跨度，那么你可以通过给它的CSS属性display: block来强制跨度表现得像块级元素。不过，我建议您使用实际的块级元素，例如h1或p标签。

来源

2012-02-07 22:47:55 Jemaclus

我在处理WordPress时遇到了类似的问题。 WordPress是臭名昭着的从博客文章的用户文本中自动删除格式化字符。我的挑战是将文章文本居中并将其分成两部分。

这就是我所做的：

<中心>这是一个很长的标题行我想显示在我的<DIV> WordPress的文章标题行</DIV > < /中心>

的作用<中心>是不言自明的。由于<div>是块级元素，因此它会发出新行。

希望这会有所帮助。

来源

2013-01-25 02:13:22

您可以模拟BR标签宽度CSS是这样的：

span:after { 
    content: ' '; 
    display: block; 
}

使用选择 “：之前的” 如果你需要 “BR” 跨度内容

jsfiddle

来源

2013-11-04 22:30:21

请注意，这不会为内联块项目创建换行符。 http://jsfiddle.net/luken/yNxF4/ – Luke 2014-03-07 21:46:05

<style> 
p.break{ 
    display:block; 
    clear: both; 
} 
</style>

之前进行了模拟

来源

2014-01-05 13:49:40 user3162041

如何使用CSS模拟<br/>（br标签）？

回答

相关问题