0

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

我几乎尝试了所有方法，但我似乎无法让文本漂浮在大字母旁边

这是代码：

杰宾

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

4

3 回答 3

2

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

更新了 jsfiddle

于 2013-10-08T15:33:46.563 回答
1

添加float: left到:before包含字母的伪元素和clear: left部分容器：

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

更新了 JSBin

目前，您的:before伪元素display: block默认情况下没有另一个display声明，这意味着它会自动填充其父元素的 100% 宽度，并且其功能就像它后面有一个换行符（与inline元素相比）。

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

于 2013-10-08T15:22:12.647 回答
0

为了让它像你的图像一样改变你的边距：auto 7px;

于 2013-10-08T15:34:22.917 回答