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

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{&nbsp; width: 60%; /* optional to control borders width */&nbsp; text-align: center;&nbsp; border-top: 4px solid #3694FF;&nbsp; margin: 20px auto -20px; /* -20px to compensate span shift */}h1 span{&nbsp; position: relative;&nbsp; top: -20px;&nbsp; padding: 0px 20px;&nbsp; display: inline-block;&nbsp; background: white;}h2{&nbsp; 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