Прямо сейчас, я пытаюсь создать веб-страницу со следующей структурой:отображающие блочные элементы инлайн
<nav>
<ul> ... </ul>
</nav>
<section class="main">
<nav class="menu"> ... </nav>
<div class="row">
<div class="column"> ... </div>
<div class="column"> ... </div>
</div>
</section>
где элементы nav.menu
и div.row
должны отображаться горизонтально выровнены, первый занимающий 25% экрана, а другой - 75%.
Я использую этот стиль CSS прямо сейчас:
.main {
display: inline;
align-items: flex-start;
}
.menu {
background-color: silver;
font-family: 'Ultra', serif;
font-size: 24px;
width: auto;
}
.menu ul {
list-style-type: none;
}
.menu ul li {
text-align: center;
width: 120px;
}
.menu ul li a {
text-decoration: none;
color: white;
}
.menu ul li a:hover {
background-color: lightsteelblue;
}
.row {
display: inline;
}
но когда я открыть страницу в браузере, элементы не отображаются, как они должны быть.
jsfiddle: https://jsfiddle.net/klebermo/y7nka4ez/
, что я здесь отсутствует?
ALIGN-элементов требует дисплей: Flex; или отображение: inline-flex; делать что-либо. Затем вы хотите: .menu и .row либо указать 'width: 25%;' и 'width: 75%;' или использовать 'flex-grow: 1;' и 'flex-grow: 3;' –