Question

<html>

<body>
  <h1>heading</h1>
  <p>paragraph</h1>
</body>

</html>

我已经搜索但我无法找到如何将段落移动到标题。像这样：

标题段落

Answer 1

您可以将其添加到您的代码中：

＆＃13;

<h1 style="display: inline;">HEADING</h1>
<p style="display: inline;">paragraph paragraph paragraph paragraph
 paragraph paragraph paragraph paragraph 
paragraph paragraph paragraph paragraph 
paragraph paragraph paragraph paragraph paragraph paragraph</p>

＆＃13;

Answer 2

h1, p{ display:inline; vertical-align:middle;}

默认情况下，h1和p元素具有display:block规则，这使得它们占据整行宽度。将它们设置为display:inline将使元素仅占用它们所包含的数量（例如，它们将只占用它们内部文本的空间），而不会在它们之前和之后没有换行符。另请查看此链接，以获得有关边距，填充，宽度属性以及应用于内联元素的其他问题的详细说明：Display rule clarification(external link)

Answer 3

我建议您使用内联元素，而不是使用块元素。

＆＃13;

.heading {
  font-size: 24px;
  font-weight: bold;
}

＆＃13;

<span class="heading">heading</span>
<span>paragraph</span>

＆＃13;

假设p和h1都在他们自己的行上，所以如果你必须，我建议你给他们一个类名，否则所有人都会有新的显示类型。< / p>

＆＃13;

.inline {
  display: inline;
}

＆＃13;

<h1 class="inline">heading</h1>
<p class="inline">paragraph</p>

＆＃13;

Answer 4

我不喜欢将样式列为标记属性。如果您稍后将CSS文件添加到HTML文档中，则会使读取HTML文件变得更加困难，并使事情变得更加复杂。如果您不想链接到外部css文件，那么我个人会在HTML文档的head部分使用样式标记。

<html>
<head>
   <title> page title here </title>
   <meta charset ="utf-8">
   <style>
   p, h1 {
   display: inline;
   }
   </style>
</head>
<body>
   <h1> Here is our heading!</h1>
   <p> and here is our paragraph next to it. </p>
</body>
</html>

但是我相信这仍然会导致段落在到达新行时在标题下环绕。如果这不是您想要的，那么您将需要使用一些div标签。我会做这样的事情......

<html>
<head>
   <title> page title here </title>
   <meta charset ="utf-8">
   <style>
   .container {
       clear: both;
   }
   .headingDiv {
       float: left;
       width: 30%;
       display: inline;
    }
    .paraDiv {
        float: right;
        width: 70%;
        display: inline;
    }

   </style>
</head>
<body>
    <div class="container">
        <div class="headingDiv">
            <h1> Here is our heading!</h1>
        </div>
        <div class="paraDiv">
            <p> And here is our paragraph next to it. And here is our paragraph next to it. And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it. </p>
        </div>
    </div>
    <div class="container">
        <div class="headingDiv">
            <h1> Here is our heading!</h1>
        </div>
        <div class="paraDiv">
            <p> And here is our paragraph next to it. And here is our paragraph next to it. And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it. </p>
        </div>
    </div>
</body>

如何移动标题

4 个答案: