我怎样才能用css定位像图像这样的元素？

Question

我有两个选择器来实现这个设计：

我几乎尝试了所有东西，但我似乎无法将文字放在大字母旁边

以下是代码：

Jsbin

HTML：

<div class="processlinks-section-template">
<div class="processlinks-section-item" data-letter="H">
    <div class="processlinks-section-item-title">
       <a href="http://aftonbladet.se">Haftonbladet.se</a>
    </div>
    <div class="processlinks-section-item-title">
        <a href="http://teabagz.com">Hteabagz.com</a>
    </div>
</div>

<div class="processlinks-section-item" data-letter="C">
    <div class="processlinks-section-item-title">
       <a href="http://Cftonbladet.se">Cftonbladet.se</a>
    </div>
    <div class="processlinks-section-item-title">
        <a href="http://Cteabagz.com">Cteabagz.com</a>
    </div>
</div>
</div>

CSS：

[data-letter] {
margin:7px;
background:#ef8;
}
[data-letter]:before {
content:attr(data-letter);
font-size:36px;
margin:7px;
}
.processlinks-section-template
{
 width: 270px;
 height: 100%;
}
}
.processlinks-section-item-title
{
margin-top:5px;
}
.processlinks-section-item-title a
{
color:black;
}
.processlinks-section-item-title a:visited
{
color:black;
}
.processlinks-section-item-title a:hover
{
color:#0084c9;
}

感谢任何形式的帮助

注意：我有一个附加内容的javascript，所以我宁愿留下这两个选择器。

如果有一个项目似乎破坏了设计，我认为这就是问题。

看看：jsbin.com/UHiZUJU/9/edit

Answer 1

将字母和链接浮动到左侧并添加clearfix。

Updated jsfiddle

Answer 2

将float: left添加到包含该字母的:before psuedo元素，并将clear: left添加到部分容器中：

[data-letter]:before {
  content:attr(data-letter);
  font-size:36px;
  margin:7px;
  display:inline-block;
}
.processlinks-section-item {
  clear:left;
}

Updated JSBin

目前，在没有其他:before声明的情况下，默认情况下，display: block伪元素为display，这意味着它会自动填充其父级宽度的100％和函数之后的换行符（与inline元素相比）。

浮动block元素意味着它只填充所需的宽度，而不是填充整个宽度的通常行为，并且还会删除隐含的换行符。容器上的clear: left只是确保为每个部分重置浮动。

Answer 3

要像在图像中那样更改边距：自动7px;