带有标题和编辑按钮的html框

时间:2012-01-03 22:33:33

标签: html css

我已经创建了这个html框,它应该有一个标题和右边的一些按钮,

http://jsfiddle.net/vqpmt/17/

除了您可以看到的编辑按钮略低于标题之外,一切似乎都很好,但不应该是他们都应该处于同一级别的情况。

我如何实现这一点,我的代码是一团糟?做这样的事情有更好的方法吗?

2 个答案:

答案 0 :(得分:1)

我将h1和编辑链接标记移动到div容器中。检查我的代码版本 here

要处于完全相同的级别,html元素必须位于容器内(如在我的小提琴中)或应使用2个内联html元素。

尝试在html和css上阅读w3schools,其中包含很多可以在短时间内学到的信息。

w3schools HTML参考here

w3schools CSS参考here

编辑: h1是一个块元素,这意味着它将添加一个新行。所以我添加了一个新的css样式.inline并将block属性更改为inline。

.inline { display: inline }

答案 1 :(得分:0)

您的H1元素会扩展页面的宽度,并将您的编辑链接向下推。我在这里提供了另一种解决方案。

小提琴:http://jsfiddle.net/GvGoldmedal/vqpmt/32/