0
私はこれをここ数日間解決しようとしています。私はドロップダウンボタンといくつかのドロップダウンコンテンツを持っています。それは完全に動作します。私が抱えている問題は、ドロップダウンのコンテンツがボタンと整列していないことです。ページのサイズ変更方法に応じて、ボタン以外の場所に配置されます。ドロップダウンのコンテンツをドロップダウンボタンに合わせる
私は何か間違っていると思います。私が今まで試したことはすべて正しく動作しませんでした。ここで
は私のコードです：私は達成するために何をしたいの
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('#dropdown')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}.navigator {
font-family: sans-serif;
background-color: #f4f4f4;
height: 80px;
width: 100%;
position: fixed;
}
.navigator #navigator-contents {
width: 85%;
text-align: center;
margin: 0 auto;
}
.navigator #navigator-contents .logo {
background-color: #f4f4f4;
float: left;
height: 80px;
line-height: 82px;
}
.navigator #navigator-contents .logo img {
vertical-align: middle;
}
.navigator #navigator-contents .logo h2 {
font-size: 1.40em;
display: inline;
vertical-align: middle;
margin: 0;
}
.navigator #navigator-contents .clock {
float: right;
height: 80px;
width: 100px;
line-height: 80px;
}
.navigator #navigator-contents .clock img {
vertical-align: middle;
}
.navigator #navigator-contents .clock h4 {
display: inline;
vertical-align: middle;
margin: 0;
margin-left: -1px;
}
.navigator #navigator-contents .dropdown {
width: 100px;
height: 80px;
display: inline-block;
line-height: 82px;
position: relative;
cursor: pointer;
outline: none;
float: right;
}
.navigator #navigator-contents .dropdown:hover {
background-color: #e5e5e5;
color: #000;
}
.navigator #navigator-contents .dropdown:focus {
background-color: #1a5dad;
color: #fff;
}
.navigator #navigator-contents .dropdown h4 {
display: inline;
vertical-align: middle;
}
.navigator #navigator-contents .dropdown-content {
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
background-color: #f4f4f4;
display: none;
position: absolute;
z-index: 1;
margin-top: 80px;
}
.navigator #navigator-contents .dropdown-content .drop-content {
display: inline-block;
padding: 30px;
float: left;
}
.navigator #navigator-contents .dropdown-content .drop-content span {
font-size: 16px;
display: inline;
vertical-align: middle;
margin: 0;
margin-left: -1px;
right: 5px;
}
.navigator #navigator-contents .dropdown-content .drop-content i {
font-size: 1.10em;
}
.navigator #navigator-contents .dropdown-content .drop-content:hover {
transition: all .2s;
background-color: #1a5dad;
color: #fff;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.navigator #navigator-contents .show {
border-top: 2px solid #1a5dad;
display: block;
}<div class="navigator">
<div id="navigator-contents">
<div class="clock">
<a href="#">
<h4>Time: </h4>
<h4>13:34</h4>
</a>
</div>
<div class="dropdown" id="dropdown" onclick="myFunction()">
<h4 id="dropdown">Home <i class="fa fa-caret-down" aria-hidden="true"></i></h4>
</div>
<div class="dropdown-content" id="myDropdown">
<a href="#">
<div class="drop-content">
<span>This</span>
</div>
</a>
<a href="#">
<div class="drop-content">
<span>Is</span>
</div>
</a>
<a href="#">
<div class="drop-content">
<span>Dropdown</span>
</div>
</a>
<a href="#">
<div class="drop-content">
<span>Content</span>
</div>
</a>
</div>
</div>
</div>画像：Image
だから、私の質問は - どのようにあなたがしてドロップダウンコンテンツを揃えますメニューボタンをクリックし、サイズを変更してもそこにとどめますか？