заголовок заголовка вместо

Вопрос:

Короче говоря, класс заголовка должен быть черной линией по всему экрану. В HTML это будет список. Дети списка будут оформлены как кнопки и должны начинаться после первых 20% страницы. Где-то вдоль линии это происходит ужасно неправильно, потому что:

  1. Список детей вообще не оформлен (маржа)

  2. Страница растягивается очень много.

Вот весь исходный код:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
html, body {
padding: 0;
background-color:#FFFCF2;
margin: 0 auto;
}

.header {
list-style:none;
width:100%;
height:65px;
font-size:3%;
background: black;
}

.header:first-child {
margin-left:20%;
}

.headerChild {
margin-left:0;
float:left;
height:65px;
width:10%;
background: white;
}
</style>
</head>
<body>
<ul class="header">
<li class="headerChild"></li>
<li class="headerChild"></li>
<li class="headerChild"></li>
</ul>
</body>
</html>

Лучший ответ:

Несколько вопросов, которые я вижу:

  • .header:first-child применяется к <ul>, поэтому измените его на .header>li:first-child и будет .header>li:first-child на первый <li> и установить его левое поле
  • Вы устанавливаете размер шрифта на 3% в .header и <li> наследуете это, убедитесь, что это то, что вы хотите
  • set padding:0 на .header а также для предотвращения горизонтальных полос прокрутки.

Вот сценарий для вас, чтобы посмотреть. Я поместил красные границы вокруг <li> и текста, чтобы вы могли их видеть.

Ответ №1

Замените CSS следующим образом:

html, body {
padding: 0;
background-color:#FFFCF2;
margin: 0 auto;
}

.header {
list-style:none;
width:100%;
height:65px;
font-size:3%;
background: black;
padding-left: 20%;
}

.header:first-child {
}

.headerChild {
margin-left:0;
float:left;
height:65px;
width:10%;
background: white;
}

Оцените статью
TechArks.Ru
Добавить комментарий