Объекты объединяются и игнорируют горизонтальное поле, отступы и т. Д. - PullRequest
Новая
       5

Объекты объединяются и игнорируют горизонтальное поле, отступы и т. Д.

0 голосов
/ 01 апреля 2020

Я написал небольшой код, который должен отображать заголовки. Эти заголовки состоят из 3 частей, текст посередине и 2 строки слева и справа (изображение 1). Если я теперь изменю ширину экрана, то объекты go будут соединены друг с другом (изображение 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>
Пожалуйста, помогите мне, я не знаю, как решить проблему. Заранее спасибо

Изображение 1 Изображение 2

Ответы [ 2 ]

0 голосов
/ 01 апреля 2020

Пожалуйста, попробуйте это. 

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>
0 голосов
/ 01 апреля 2020

Вы можете использовать библиотеку bootstrap 4, она будет обрабатывать все сценарии автоматически.

Вот ссылка get bootstrap .com

...