CSS边距随H1长度的增加而增加_Css_Layout

CSS边距随H1长度的增加而增加

css layout

CSS边距随H1长度的增加而增加,css,layout,Css,Layout,考虑以下标记： <!DOCTYPE html> <html> <head> <title>Test Page</title> <link href="screen.css" rel="stylesheet" /> </head> <body> <h1>Test</h1> <h3>

考虑以下标记：

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

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

我想你真正想要的是：

h1 {
  display: inline;
}

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

我想你真正想要的是：

h1 {
  display: inline;
}

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

这不是你想要的吗

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

这不是你想要的吗

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

如果h3应该在H1下方的直线上，但仍然在h3的正下方（你是说？），那么我有一个（可能是非最佳的）解决方案，它对我有效：

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

HTML:

测试
描述

如果h3应该在H1下方的直线上，但仍然在h3的正下方（你是说？），那么我有一个（可能是非最佳的）解决方案，对我有效：

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

HTML:

测试
描述

是的，这样做会更好，如果行下有更多文本，请确保在行后放置

，或者甚至尝试使用内联块而不是纯内联。是的，这样做会更好，如果行下有更多文本，请确保在行后放置

，或者甚至尝试使用内联块而不是纯内联块。