浮动“编辑”链接标题的右侧（必须保持标题标签块）

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 { }

我有一个艰难的时间搞清楚如何浮动的“编辑”链接h1标签的右边，但保持h1标签作为一个块级元素，使得它有下划线（底部边框）

任何人都可以给我一些建议......这样做过？谢谢你在前进

Answer 1

有不同的策略来实现这一点。你既可以漂浮的容器来解决一个浮动或使用生成的内容来清除浮动。我会尝试瓦特/代码同时解释。对于这两种，你可以保持您的标记，但需要下划线从H1移动到.header类。然后浮在头向左，编辑到右侧，通过浮置.header类以及固定所述浮动。这种技术依赖于后随之而来的缺点，但是否适合你的隔离一段代码：

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%; }

在IMHO更好的解决方案是使用CSS生成的内容以清除浮置而不是浮在.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%; }

有关该第一方法的更多信息请参见埃里克迈耶的文章 HTTP：//www.complexspiral。 COM /出版物/含浮/ 。第二种方法在 http://www.positioniseverything.net/easyclearing.html 是记录。