1

我正在寻找如何在段落中的文本后添加间距。

HTML：

<h1>abc</h1>

CSS：

h1 {
    float: left;
    background: red;
    color: white;
    text-indent: 15px;
}

h1:after {
    content: '';
    margin-left: 15px;
}

但是：只能在现代浏览器中工作？如何在没有填充和边距的旧浏览器的文本后添加空格？

工作演示：http: //jsfiddle.net/YS2MQ/1/

4

4 回答 4

0

您可以考虑将&nbsp;实体添加到 html。

于 2013-03-05T18:06:25.823 回答
0

使用填充：

h1 {
    padding: 0 15px;
}
于 2013-03-05T18:11:33.860 回答
0

我能想到的一些方法在这个小提琴中：http: //jsfiddle.net/YS2MQ/3/我在这个答案的末尾添加了一个完全不同的解决方法。

HTML：

<h1 class="ie8plus">abc</h1>

<h1 class="border">abc</h1>

<h1 class="cc">abc<!--[if lte IE 7]> <span>I'm IE7-, let me die please</span><![endif]--><!--[if gt IE 8]><!--> not IE7- here<!--<![endif]--></h1>

<h1 class="textindent"><span>abc</span></h1>

<h1>.after<span class="after"> </span></h1>

CSS：

body {
    margin: 10px;
}

h1 {
    float: left;
    clear: left;
    margin-bottom: 5px;
    background: red;
    color: white;
    text-indent: 15px;
}

.ie8plus:after {
    content: '';
    margin-left: 15px;
}

.border {
    border-right: 20px solid blue; /* you want red obviously. 'transparent' won't work in IE7- so you must have a solid background under h1 */
}
.textindent {
    text-indent: 35px; /* already 15px and we add 20px */
}
.textindent span {
    position: relative;
    left: -20px;
}
.cc span { /* HTML conditional content only interpreted by IE7-. Messy on so many levels... Let's keep the use of conditional comments to conditional stylesheets and conditional classes! */
    background-color: yellow;
    color: black;
}
h1 .after {
    display: inline; zoom: 1; /* that's inline-block for IE7-... and inline isn't required as span is already inline */
    width: 20px;
    height: 1px;
    vertical-align: middle;
    background-color: darkred;
}

用一句话来说：

  • 您可以添加右边框，
  • 您可以滥用条件注释来强制 IE7- 看到其他浏览器看不到的 HTML 内容（注意：每页多次使用它，这将无法管理），
  • 您可以将文本包含在 aspan中并使用text-indent和相对定位，
  • 您可以添加一个空span.after来模仿伪 `:after （我在小提琴中留了一个空格，但我认为没有必要）。是的，这是额外的代码和等等等等，但是如果你被迫支持旧浏览器的约束和他们不支持的方法，那么剩下的选择不多了！;)

或者：

我在您的一条评论中看到您对width. 使用 CSS 属性box-sizing （带有适当的供应商前缀）可以解决您的问题，其中填充和边框可以考虑到整个宽度，不再添加：

* { box-sizing: border-box }

但这仅受 IE8+ 支持。这是 IE7-... 没有 doctype 的默认行为。哦，讽刺！
但一切都没有丢失，存在一个 polyfill：boxsizing.htc

于 2013-03-05T19:12:59.790 回答
0

这是两个画布之间的空白（在本例中为换行符）

或者，您可以保留空白，并在 CSS 中将 float:left 添加到画布。如果你

清除你的花车。

于 2013-03-05T19:19:13.777 回答