0
私は以下のナビゲーションメニューに取り組んでいます。ロゴと同じ高さにナビゲーションリンクを設定するには？
/*
Variables
*/
body {
font: 100% "Lato", sans-serif;
margin: 0;
}
#container {
width: 100%;
margin-top: 47px;
}
/*
Navigation menu
*/
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
border-bottom: solid 3px #21ce99;
z-index: 1;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: #21ce99;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #F2F2F2;
}
/*
Layout
*/
section {
position: relative;
float: left;
width: 60%;
background-color: white;
}
aside {
position: relative;
float: right;
width: 40%;
clear: right;
}
footer {
clear: both;
background-color: #21ce99;
height: 500px;
}
/*
Styling
*/
h1 {
color: rgba(0, 0, 0, 0.87);
font: 300% "Lato", sans-serif;
padding: 30px;
}
p {
color: rgba(0, 0, 0, 0.54);
font-size: 1.3em;
margin: 20px;
}
a#logo {
font: 300% 'Wire One', sans-serif;
}
img {
width: 100%;
max-width: 600px;
margin: 10px;
}
table, th, td {
border: solid .13em #16a085;
border-radius: .3em;
font-size: 15px;
padding: 10px;
border-collapse: collapse;
}
/*
Widgets
*/
.btn {
padding: 1em 1em;
display: inline-block;
border-radius: .38em;
border: .12em solid #21ce99;
text-decoration: none;
color: #21ce99;
margin: 20px;
}
.btn:hover {
background-color: #21ce99;
color: white;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<link href='https://fonts.googleapis.com/css?family=Wire+One|Lato:100,100italic,300,300italic,400italic,400,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<title>methusela</title>
</head>
<body>
<nav>
<ul>
<li><a id="logo" href="index.html">methusela</a></li>
<li><a href="index.html">Discover</a></li>
<li><a href="histoire.html">Buy</a></li>
<li><a href="contact.html">Yes</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div id="container">
<section>
<h1></h1>
<a href="#" class="btn">
Learn more
</a>
</section>
<aside>
<img src="" />
</aside>
<footer>
</footer>
</div>
</body>
</html>すべてのリンクはナビゲーションボックスの真ん中にもともと垂直だったが、私は、異なるサイズのテキストを使用してロゴを追加した後。すべてのメニューリンクはもはや中央にはありません。
メニューリンクの寸法を自動的にボックス全体に塗りつぶして最大のアイテムに合わせる方法はありますか？あるいは、ボックス内のリンクを垂直方向に集中させる方法はありますか？
ありがとうございました。
ありがとうございました。とにかく、ホバリングバックグラウンドの範囲をnavボックスの上下に色分けできるかどうか知っていますか？ – soyster
@soysterはい、 'nav ul li a'クラスの' display：block; 'を削除する必要があります。私はこれがあなたが参照しているものだと思います。 –