Question

考虑以下标记：

<!DOCTYPE html>
<html>
    <head>
        <title>Test Page</title>
        <link href="screen.css" rel="stylesheet" />
    </head>
    <body>
        <h1>Test</h1>
        <h3>Description</h3>
    </body>
</html>

CSS：

h3{
    margin-top: -25px;
}

现在，我希望H3有一个剩余边距，不管H1多长，它始终是20px。所以，如果我有一个长度为200px的H1块，那么H3的剩余边距为220px，依此类推。我该怎么做？

Answer 1

我认为你真正想要的是：

h1 {
  display: inline;
}

h3 {
  display: inline;
  margin-left: 20px;
}

Answer 2

这不是你想做的吗？

h1 {
   float:left;
}
h3 {
   margin:0 0 0 20px;
   float:left;
}

Answer 3

如果h3应该位于下面的行 H1，但仍然是H3（你的意思是？），那么我有一个（可能是非最佳的）解决方案，适用于我：

#title { float:left; } #h3wrapper { float:left; } h3 { margin-top: -25px; }

HTML：

<h1 id="title">Test</h1> <div id="h3wrapper"> <h1> </h1> <h3>Description</h3> </div>

CSS边距随H1长度增加

3 个答案: