Новичок в html/css. Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dropdown menu</title>
<style>
body {
font-family: sans-serif;
}
nav {
color: black;
width: 100%;
text-align: center;
border-radius: 8px;
}
div.nav, div.dropdown {
display: inline-block;
position: relative;
width: 16%;
text-align: center;
font-weight: bold;
}
div.dropdown-content {
position: absolute;
display: none;
width: 100%;
overflow: auto;
text-align: left;
font-size: 90%;
}
div.dropdown:hover div.dropdown-content {
display: block;
}
div.dropdown-content a, div.nav a {
display: block;
background: lightgrey;
color: black;
text-decoration: none;
padding: 5px;
}
div.dropdown-content a {
font-weight: normal;
}
div.dropdown-content a:hover, div.nav a:hover {
background: darkseagreen;
border-radius: 4px;
}
button.dropdown {
background: lightgrey;
color: black;
width: 100%;
height: 100%;
border: 0px;
font-size: 100%;
font-weight: bold;
padding: 5px;
}
button.dropdown:hover {
background: darkseagreen;
border-radius: 4px;
}
</style>
</head>
<body>
<nav>
<div class="nav">
<a href="#">Главная</a>
</div>
<div class="dropdown">
<button class="dropdown">Меню 1</button>
<div class="dropdown-content">
<a href="#">Подменю 1.1</a>
<a href="#">Подменю 1.2</a>
</div>
</div>
<div class="dropdown">
<button class="dropdown">Меню 2</button>
<div class="dropdown-content">
<a href="#">Подменю 2.1</a>
<a href="#">Подменю 2.2</a>
</div>
</div>
<div class="nav">
<a href="#">Меню 3</a>
</div>
<div class="dropdown">
<button class="dropdown">Меню 4</button>
<div class="dropdown-content">
<a href="#">Подменю 4.1</a>
<a href="#">Подменю 4.2</a>
<a href="#">Подменю 4.3</a>
</div>
</div>
<div class="nav">
<a href="#">Справка</a>
</div>
</nav>
</body>
</html>
В блоке навигации у меня несколько ссылок и кнопок с выпадающим меню с ссылками. Я хочу, чтобы кнопки и ссылки были на одной линии и одинаковой высоты (внезапно!).
Пробую это делать через padding, но они все равно не на одной линии. Еще и в разных браузерах по разному. В firefox они одного размера, но немного не по линии, а в chromium/safari они еще и разного размера. Как универсально выровнять?
