对象合并并忽略水平边距、填充等

Question

我编写了一段应该显示标题的小代码。这些标题由 3 部分组成，中间是文本，左右各 2 行（图 1）。如果我现在更改屏幕的宽度，对象就会相互结合（图 2）。我希望它们能够适应页面的大小，并使线条和文本变小。仅计算机视图。html {    height: 100%;    font-family: 'Montserrat' sans-serif;    display: grid;    align-items: center;    justify-items: center;/*---------------------------------------------------------------------------*//*---------------------------------------------------------------------------*/    --bg: #333333;    --bg-panel: #434343;    --color-headings: #3694FF;    --color-text: #ffffff;}html[data-theme='dark'] {    --bg: #FCFCFC;    --bg-panel: #EBEBEB;    --color-headings: #0077FF;    --color-text: #333333;}/*---------------------------------------------------------------------------*//*---------------------------------------------------------------------------*/a{text-transform: uppercase; text-decoration: none; font-weight: bold; font-size: 1.1em; font-family: 'Montserrat', sans-serif;}hr{width: 10%; height: 4px; background: var(--color-headings); border: 0; margin: 0;}h1, h2, h3, p, a, ul li{font-family: 'Montserrat', sans-serif; color: var(--color-text)}header{position: fixed; float: left; margin: 0; padding: 0; border: 0}body{background-color: var(--bg);}ul li{list-style-type: none;}h2{text-align: center}/*---------------------------------------------------------------------------*//*---------------------------------------------------------------------------*/.header{  margin-top: 5%;  width: 100%;}.header ul{  list-style-type: none;  margin: 0 auto 0 auto;  padding: 0;  width: 50%;  float: none;  border-left: 25%;  border-right: 25%;}.header ul li{  width: 32%;  float: left;  margin-bottom: 1%;  margin-left: 0.5%;  margin-right: 0.5%;  margin-top: 15%;}.header ul li hr{  width: 100%;  float: none;  margin: 0;  margin-left: auto;  margin-right: auto;  margin-top: 8%;  margin-bottom: 10%;}.header ul li h1{  margin: 0;  float: left;  margin-left: 10%;  margin-right: 10%;  width: 100%;}请帮助我，我不知道如何解决这个问题。提前致谢图 1 图 2

Answer 1

请尝试这个。

h1{

  width: 60%; /* optional to control borders width */

  text-align: center;

  border-top: 4px solid #3694FF;

  margin: 20px auto -20px; /* -20px to compensate span shift */

}

h1 span{

  position: relative;

  top: -20px;

  padding: 0px 20px;

  display: inline-block;

  background: white;

}

h2{

  text-align: center;

}

<h1><span>Funktionen</span></h1>

<h2>Hier findest du eine Übersicht der Funktionen des Programms</h2>

Answer 2

您可以使用 bootstrap 4 库，它会自动处理所有场景。

这是链接 getbootstrap.com