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

更好的解决方案是使用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。

中

将“编辑”链接浮动到标题右侧（必须保持标题标记块）

1 个答案: