logo标签列表

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

csscss-floathtml-heading
6

给定以下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标签作为块级元素，以便它拥有底部边框线（border-bottom）。
请问有人可以给我一些建议吗？之前做过这个吗？提前谢谢。
1个回答
7

有多种策略可以实现这一点。您可以将容器浮动以固定浮动，也可以使用生成的内容来清除浮动。我将尝试用代码解释两者。对于两者，您可以保留标记，但需要将下划线从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%; }

我认为更好的解决方案是使用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%; }

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接