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

Question

我写了一个应该显示标题的小代码。这些标题由 3 部分组成，中间的文本和左右 2 行（图 1）。如果我现在更改屏幕的宽度，objects 会相互重叠（图 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%;
}

h2{
  width: 100%;
  float: none;
}

<div class="header">
  <ul>
    <li><hr></li>
    <li><h1>Funktionen</h1></li>
    <li><hr></li>
    <h2>Hier findest du eine Übersicht der Funktionen des Programms</h2>
  </ul>
</div>
<br>

请帮助我，我不知道如何解决这个问题。提前致谢

Image 1 Image 2

Answer 1

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

这里是linkgetbootstrap.com

Answer 2

请试试这个。

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>

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

Objects merge and ignore horizontal margin, padding etc

html

css

margin