仅使用css并排放置两个H元素

4smxwvx5 于 2022-12-20 发布在其他

关注(0)|答案(2)|浏览(348)

我想把这两个“h”元素，但只是两个“h”元素（没有改变其余的），并排使用css，我不想改变html.（原因是，有两个许多html模板，我想得到相同的结果，所以如果有可能这样做与css我可以避免覆盖和编辑许多html文件.）
我想要实现的“title”是由两个元素（title和subtitle）组成的单行标题，两个元素之间用管道符（|），所以我也可以给予一个风格。

<div class="carousel-box">
    <h1 class="carousel-item-header h1 text-right">title</h1>
    <h2 class="carousel-item-subheader h1 text-right">subtitle</h2>
  <div class="carousel-item-bodytext">
    <p>Ignatenis molorro mi, que cone ne pliquunt ut odionet dolorerio rectur con cuptae la cori velit, nulluptaspe molorem. | Doloreped quias dia expeditatium resequis aut faccus andem eatia qui de ommo.</p>
  </div>
  <a href="http://hebotek.at" class="carousel-item-button btn btn-primary">
    <span>il is antur em quias</span>
  </a>
</div>

有什么想法吗？

css

来源：https://stackoverflow.com/questions/74853774/place-two-h-elements-side-by-side-just-with-css

2条答案

按热度按时间

goucqfw61#

你可以把h1和h2放在一个div中，然后像这样对这个div应用display：flex，

<div class="carousel-box">
  <div class="hs">
    <h1 class="carousel-item-header h1 text-right">title</h1>
    <h2 class="carousel-item-subheader h1 text-right">subtitle</h2>
  </div>
  <div class="carousel-item-bodytext">
    <p>Ignatenis molorro mi, que cone ne pliquunt ut odionet dolorerio rectur con cuptae la cori velit, nulluptaspe molorem. | Doloreped quias dia expeditatium resequis aut faccus andem eatia qui de ommo.</p>
  </div>
  <a href="http://hebotek.at" class="carousel-item-button btn btn-primary">
    <span>il is antur em quias</span>
  </a>
</div>

.hs {
  display: flex;
  flex-direction: row;
}

赞(0）回复(0）举报 2022-12-20

z31licg02#

可以使用它们的共享类使它们都显示为内联，并在标题上使用:after添加管道：

.h1 {
  display: inline;
}

.carousel-item-header:after {
  content: '|'
}

<div class="carousel-box">
    <h1 class="carousel-item-header h1 text-right">title</h1>
    <h2 class="carousel-item-subheader h1 text-right">subtitle</h2>
  <div class="carousel-item-bodytext">
    <p>Ignatenis molorro mi, que cone ne pliquunt ut odionet dolorerio rectur con cuptae la cori velit, nulluptaspe molorem. | Doloreped quias dia expeditatium resequis aut faccus andem eatia qui de ommo.</p>
  </div>
  <a href="http://hebotek.at" class="carousel-item-button btn btn-primary">
    <span>il is antur em quias</span>
  </a>
</div>

然后，您可以根据需要进行调整。

赞(0）回复(0）举报 2022-12-20

我来回答

仅使用css并排放置两个H元素

2条答案

相关问题

热门标签

最新问答