html - 标题内的简单文本

Question

我希望“h2”紧挨着“h1”，但风格不同。有简单的方法吗？

`<div>
    
    <div>
    <h5 class = "roh">h1</h5>
    </div>
    <div align="center">h2</div>
    
</div>`

.roh {
    font-family: 'Roboto Slab', serif;
    background-color : #E8E1E1;
    text-align: left-side;
    text-indent: 15px;
    color : red ; 
    border: 2px black;
    border-radius: 2px;
    margin: auto;
    width: 300px;
    height : 40px ;
    line-height: 40px; 
    clear:both ;

}

标签： htmlcssheader

Answer 1

您可以使用flexbox相同的。

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.container {
  position: relative;
  width: 200px;
  /* you can change */
}

.container p {
  background: red;
  padding: 0 0.5rem;
  font-size: 1.5rem;
}

.container div {
  display: flex;
  align-items: center;
}

.container div h1,
.container div h2 {
  width: 100%;
}

<div class="container">
  <p>Something</p>
  <div>
    <h1>H1</h1>
    <h2>H2</h2>
  </div>
</div>

如果您想将它们完全并排对齐。然后width: 100%从h1和中删除h2。