Question

我正在设计博客的评论部分。我的标记是每个评论的有序列表项。在里面我有一个向左浮动的标题，一些span-tag在标题中浮动。我试图清除标题（例如，每个clearfix-hack来自此列表：http://red-team-design.com/clearing-floats-nowadays/），但没有任何方法可以使数字保持原样。

我做了一个fiddle来玩一下，但是无法让它发挥作用。

HTML：

<ol>
    <li>
        <article>
            <header class="clearfix">
                <h4>Heading</h4>
                <span>Some link</span>
            </header>
            <p>Some content.</p>
        </article>
    </li>
</ol>

的CSS：

ol, li, article, header, h4, span {
    font-size: 14px;
    line-height: 28px;
    margin: 0;
    padding: 0;
}


ol {
    margin: 0 0 28px 28px;
}

h4 {
    float: left;
}

span {
    float: right;
}

如果没有好办法解决这个问题，我愿意接受有关标记更改的建议。

编辑：我希望它看起来像这样：

1. Heading             Some link|
   Some content comes her. Text,|
   text, text, text, text, text,|
   text and more text.          |
                                |
2. A much longer heading        |
                       Some link|
   Some content and so on...    |
                                |
                                |
3. Even headings can be very,   |
   very long           Some link|
   Content goes here.           |
                                ^Right border of containing element.

Answer 1

我认为这是造成你的问题的clearfix，我在这里玩过一次

http://codepen.io/dave_agilepixel/pen/hEFrk

仅浮动跨度，并删除清除修复并使用内联块以使h4和跨度保持在同一行，我认为这可以解决您的问题。

Answer 2

在这个问题的另一个晚上睡了之后，我尝试了一种不同的方法，它运行良好。基本上我使用list-style-type: none，一个clearfix-hack并从CSS计数器中获取我的数字。

The (updated) full solution（The old solution）：

ol {
    margin: 0 0 2em 2em;
    list-style-type: none;
    counter-reset: comment;
}

ol li article header h4::before {
    counter-increment: comment;
    content: counter(comment) ".\00A0";
    display: block;
    width: 10em;
    text-align: right;
    position: absolute;
    left: -10em;
}

header {
    position: relative;
}

h4 {
    display: inline;
}

span {
    float: right;
}

.clearfix::after 
{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

非常感谢，Dave和Notulysses！

（如果有人知道，为什么列表和clearfix-hacks存在问题，我不介意，如果她/他可以向我解释这一点。）

Clearfix无法使用float：left和float：在<ol> </ol>中

2 个答案: