1

首先，这是指导方针以及我想要实现的目标：

在此处输入图像描述

它不需要看起来 100% 相似，但应该在每个 EndOfLine 处至少留一个空格。好吧，当我尝试这样做时会发生这种情况：

在此处输入图像描述

如您所见，第一行的结尾和第二行的开头与边框没有空间。另一方面，第一行的开头和第二行的结尾确实有一个空格。

这是我的 HTML 和 CSS 标记。

<div class="headline-h2">
<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h2>
</div>


h2 {
background-color: #000000;
clear: left;
color: #FFFFFF;
display: inline;
float: left;
font-size: 14px;
font-weight: normal;
padding: 4px;
position: relative;
}

.headline-h2 {
float: left;
margin-bottom: 28px !important;
width: 100%;
}

我已经尝试了一些事情，但我无法终生解决这个问题。我还必须补充一点，文本是可变的，因此如果客户想要它，它可能会完全不同。还需要说的是，我们明确需要它作为内联元素。我知道它适用于块。

4

1 回答 1

1

为什么不只是添加padding到您的h2：

h2 {
    background-color: #000000;
    clear: left;
    color: #FFFFFF;
    display: inline-block;
    float: left;
    font-size: 14px;
    font-weight: normal;
    position: relative;
    padding-left: 5px;
    padding-right: 5px; 
}
于 2013-03-25T10:01:02.217 回答