css - Float "edit"链接到标题右侧(必须保留标题标签 block )

Question

给定以下 html

<div class="module">           
            <div class="header">
                <h1>Test Heading</h1>
                <a href="">edit</a>
            </div>
            <div class="body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu lacus at augue tristique dignissim. Nunc vitae porta lorem. Nullam eu nunc sit amet arcu dictum convallis. Vestibulum quis purus quis sem rhoncus imperdiet eget at nisl. Fusce non metus libero, vel viverra purus. Quisque ullamcorper congue risus vel adipiscing. Quisque vehicula ante in quam malesuada at porta diam gravida. Aenean sagittis, ipsum eget egestas malesuada, turpis neque aliquam metus, lobortis congue ligula nisi quis purus. Integer nec dui et elit suscipit ultrices et sit amet enim. Nulla euismod commodo metus, eget luctus urna dignissim in.</p>
            </div>
        </div>

和下面的CSS

body { font-family: Helvetica, Arial, "Lucida Sans Unicode", Tahoma, Verdana, Arial, Helvetica, sans-serif; }
            h1 { margin: 0; padding: 0; border-bottom: 3px solid #333333; color: #333333; font-size: 40px; font-weight: normal; letter-spacing: 0; line-height: 1.3em; }

            .module { }
                .module .header h1 { }
                .module .header a { }

我很难弄清楚如何将“编辑”链接 float 到 h1 标签的右侧，但将 h1 标签保留为 block 元素，以便它具有下划线(边框底部)

谁能给我一些建议……以前做过吗？提前谢谢你

Answer 1

实现这一点有不同的策略。您可以 float 容器以修复 float 或使用生成的内容来清除 float 。我将尝试用代码解释两者。对于两者，您都可以保留标记，但需要将下划线从 h1 移动到 .header 类。然后将标题 float 到左侧，编辑到右侧并通过 float .header 类来修复 float 。这种技术的缺点是依赖于后面的内容，但适用于您的独立代码段:

h1 {
    margin: 0;
    padding: 0;
    color: #333333;
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1.3em;
}

.header { border-bottom: 3px solid #333333; }
.module .header h1 { float: left; }
.module .header a { float: right; }
.module .header { float: left; width: 100%; }

恕我直言，更好的解决方案是使用 CSS 生成的内容来清除对立的 float ，而不是 float .header 容器。但请注意，这会在支持 CSS 的浏览器版本较低的情况下造成问题。

h1 {
    margin: 0;
    padding: 0;
    color: #333333;
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1.3em;
}

.header { border-bottom: 3px solid #333333; }
.header:after { content: "."; display: none; clear: both; }
.module .header h1 { float: left; }
.module .header a { float: right; }
.module .header { width: 100%; }

有关第一种方法的更多信息，请参阅 Eric Meyer 的文章 http://www.complexspiral.com/publications/containing-floats/ .第二种方法记录在 http://www.positioniseverything.net/easyclearing.html 中。 .